How to capitalize text in Flutter

Question

I tried to find how capitalize text in Flutter, but I couldn't find it.

My code:

Center(
    heightFactor: 2,
    child: Text(
      'Strengthening the bond of owners and pets, more than ever...',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 20.0,
        fontStyle: FontStyle.italic,
        fontWeight: FontWeight.bold,
        color: Colors.cyanAccent[700],
        wordSpacing: 8,
      ),
    )),

Prepense

Answer 1

I dont know if there is a way to do it through the Text widget, but you can use string.toUppercase() to capitalize the word:

Center(
heightFactor: 2,
child: Text(
  'Strengthening the bond of owners and pets, more than ever...'.toUpperCase(),
  textAlign: TextAlign.center,
  style: TextStyle(
    fontSize: 20.0,
    fontStyle: FontStyle.italic,
    fontWeight: FontWeight.bold,
    color: Colors.cyanAccent[700],
    wordSpacing: 8,
  ),
)),

UPDATE:

To capitalize just the first letter of the String you can simply add an extension like this:

extension StringExtension on String {
  String capitalize() {
     return 
       "${this[0].toUpperCase()}${substring(1).toLowerCase()}";
  }
}

and call it anywhere like this:

'string'.capitalize()

Crocker

@bensel - this is not capitalization, it's uppercase – Jestude

@Jestude but i hope i have answered his question – Crocker

Answer 2

To capitalize and to uppercase are different:

• Capitalize: "Strengthing..."
• Uppercase: "STRENGTHING..."

Capitalize

To capitalize a string in all locales:

import 'package:intl/intl.dart';

toBeginningOfSentenceCase('strengthening...');

To capitalize a string for en-US like locales:

String text = 'strengthening...';
text = text[0].toUpperCase() + text.substring(1).toLowerCase();

You can also have the virtual keyboard automatically switch to uppercase on the start of a sentence:

TextField(
  textCapitalization: TextCapitalization.sentences
)

https://api.flutter.dev/flutter/services/TextCapitalization.html

Uppercase

To uppercase a string:

'strengthening...'.toUpperCase()

You can also have the virtual keyboard automatically switch to uppercase on each character

TextField(
  textCapitalization: TextCapitalization.characters
)

https://api.flutter.dev/flutter/services/TextCapitalization.html

Jestude

Answer 3

Better way to capitalize text

// copy this code to somewhere in your dart file
// also you can write/add methods to below code to support your strings to modify i.e. `toCapitalize()` or `yourStringModifyingMethod`.

extension StringCasingExtension on String {
  String toCapitalize() => length > 0 ? ${this[0].toUpperCase()}${substring(1).toLowerCase()}' : '';
  // String yourStringModifyingMethod() => write your logic here to modify the string as per your need;
}

Here is how you can use it

var word = 'this is capital'.toCapitalized(); // 'This is capital'

Barfield

Answer 4

As must of us with HTML and CSS knowledge when we use text-transform: capitalize; means that all words will transform the first letter to uppercase, I am sharing my approach achieving the goal.

extension StringExtension on String {
    String toCapitalize() {
        String targetString = this;
        List<String> stringSeparatedBySpace = targetString.toLowerCase().split(" ");
        List<String> capitalizedWord = [];
    
        for (var word in stringSeparatedBySpace) {
           word.isEmpty ? "" : capitalizedWord.add("${word[0].toUpperCase()}${word.substring(1)}");
           }
    
        return capitalizedWord.join(" ");
     }
}

// to capitalize this string

string.toCapitalize();

// result:  To Capitalize This String

Momentary

Answer 5

For Exact Behaviour as CSS text-transform: capitalize;

Capitalize in CSS makes every first letter of every word in a sentence to uppercase. So I've improved on other answers.

    extension StringExtension on String {
      String toCapitalize() {
         return split(' ')
          .map((word) => word[0].toUpperCase() + word.substring(1).toLowerCase())
          .join(' ');
      }
    }

add this extension to main.dart file or import where necessary. after importing every String type would have a method called toCapitalize

 'stack overflow answers'.toCapitalize() // output --> 'Stack Overflow Answers'

Ritenuto

Answer 6

Well, you could use this package to capitalize the content in the Text widget:

https://pub.dev/packages/text_tools.

//This will put the letter in position 15 in UpperCase, will print 'Strengthening The bond of owners and pets, more than ever...'
Center(
    heightFactor: 2,
    child: Text(
      TextTools.toUppercaseAnyLetter(text: 'Strengthening the bond of owners and pets, more than ever...', position: 15),
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 20.0,
        fontStyle: FontStyle.italic,
        fontWeight: FontWeight.bold,
        color: Colors.cyanAccent[700],
        wordSpacing: 8,
      ),
    )),

Pieter