How to capitalize text in Flutter

Viewed 5951

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,
      ),
    )),
4 Answers

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,
  ),
)),

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

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,
      ),
    )),

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'
Related