How to capitialize first letter of TextFormField in flutter

Question

I'm trying to capitialize the first letter of Textformfield, for this i'm using the

textCapitalization: TextCapitalization.words,

but it's not working for Textformfield, and works for textfield

please help how to do this.

Ravindra S. Patil · Answer 1 · 2023-03-14T13:22:32.597

Try below code hope its helpful to you. refer TextCapitalization Here

Capital first letter TextCapitalization.words
Capital each letter TextCapitalization.characters
Capital first letter of textfield TextCapitalization.sentences
Default lowercase letter of textfield TextCapitalization.none

Your Widget:

   TextField(
      textCapitalization: TextCapitalization.words,
      decoration: InputDecoration(
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        prefixIcon: Icon(
          Icons.search,
        ),
        hintText: 'Search',
      ),
    ),

Result screen using TextCapitalization.words:

Result screen using TextCapitalization.characters:

Result screen using TextCapitalization.sentences:

Result screen using TextCapitalization.none:

score 11 · Accepted Answer · answered Nov 16 '21 at 05:24

You can try with formatter for upper case, in TextFormField you just use UpperCaseTextFormatter class in input formatters section

TextFormField(
            controller: _textEditingController,
            inputFormatters: <TextInputFormatter>[
              UpperCaseTextFormatter()
            ],
          )

Upper text formatter

class UpperCaseTextFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    return TextEditingValue(
      text: capitalize(newValue.text),
      selection: newValue.selection,
    );
  }
}
String capitalize(String value) {
  if(value.trim().isEmpty) return "";
  return "${value[0].toUpperCase()}${value.substring(1).toLowerCase()}";
}

output:

how about capitalize the first letter after full stop? – Choy Dec 20 '21 at 03:04 — Choy, Dec 20 '21 at 03:04

score 9 · Answer 3 · answered Nov 16 '21 at 05:29

9

TextFormField(
       textCapitalization: TextCapitalization.words,
       ),

This capitalize first letter of each word we type in a TextFormField.

After setting textCapitalization, try rebuilding on your emulator or device instance and check again. Let me know it works then,

answered Nov 16 '21 at 05:29

Safeela Nasarin

91
2

1

Much better than the current accepted anwser. Clean and simple. – MarcoFerreira Aug 31 '22 at 08:52

score 6 · Answer 4 · edited Aug 12 '22 at 14:47

6

To make it work with TextFormField, you must add

textCapitalization: TextCapitalization.sentences // Capital first letter
keyboardType: TextInputType.text,

for instance with keyboardType: TextInputType.name, it won't work.

edited Aug 12 '22 at 14:47

Kumar Lokesh Rathod

661
4
15

answered Jul 29 '22 at 09:48

debovitch

76
1
3

score 1 · Answer 5 · answered Nov 21 '22 at 15:20

1

Just compliting Safeela Nasarin answer, which works fine.

Simply make sure to use the embedded emulator keyboard, or the device embedded keyboard depending on your case. It won't work with external or computer keyboard.

answered Nov 21 '22 at 15:20

Dieu le veut Nkenye

73
1
6

score 1 · Answer 6 · answered Nov 22 '22 at 13:37

1

If you have a TextFormField instead of a TextField, use:

textCapitalization: TextCapitalization.sentences

This will capitalise the first letter. Use it with:

keyboardType: TextInputType.text,

answered Nov 22 '22 at 13:37

reeco

47
9

score 0 · Answer 7 · answered Aug 31 '22 at 10:13

Jahidul Islam answer didn't work for me because I need to capitalize all word in a sentence. The textCapitalization property didn't make the job because it just sugested to the user by auto capitalize the keyboard and my requirements were that the input HAS to be word capitalized.

So I need to implemented it be myself, using the base TextEditingValue provided by Jahidul. This CHANGES the input, so the user can't violate our requirements to this field.

Hope it help others.

class UpperCaseTextFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    return TextEditingValue(
      text: capitalizeAllWordsInFullSentence(newValue.text),
      // text: capitalizeAllWordsInFullSentence(newValue.text),
      selection: newValue.selection,
    );
  }
}

String capitalizeAllWordsInFullSentence(String str) {
  int i;
  String constructedString = "";
  for (i = 0; i < str.length; i++) {
    if (i == 0) {
      constructedString += str[0].toUpperCase();
    } else if (str[i - 1] == ' ') {
      // mandatory to have index>1 !
      constructedString += str[i].toUpperCase();
    } else {
      constructedString += str[i];
    }
  }
  // print('constructed: $constructedString');
  return constructedString;
}

String capitalize1Word(String value) {
  if (value.trim().isEmpty) return "";
  return "${value[0].toUpperCase()}${value.substring(1).toLowerCase()}";
}

score 0 · Answer 8 · answered Apr 29 '23 at 10:05

I was having the same issue TextCapitalization.sentences or TextCapitalization.words didn't work for me because of keyboardType: TextInputType.name. When I changed it to keyboardType: TextInputType.text then textCapitalization started to work in both (sentences & words).

score 0 · Answer 9 · answered Jul 23 '23 at 12:24

0

The best of all of them is to use onchanged:

TextField(
controller: mytext,
onChanged: (value) {               
  mytext.value = TextEditingValue(
      text: value.toUpperCase(), 
      selection: mytext.selection
  );
}
)

answered Jul 23 '23 at 12:24

Muhammad Ullah

263
2
7

How to capitialize first letter of TextFormField in flutter

9 Answers9