How to Capitalize String, Word, Sentence on TextField in Flutter

In this example, we are going to show you how to capitalize the first letter of text input to uppercase on TextField and TextFormField in Flutter. We have shown different examples to capitalize the first letter of the string, the first letter of each word, and the first letter of each sentence.

See this also: How to Capitalize First Letter of Word and Sentence in Flutter

How to Capitalize the first letter of TextField:

String capitalize(String value) {
  var result = value[0].toUpperCase();
  bool cap = true;
  for (int i = 1; i < value.length; i++) {
      if (value[i - 1] == " " && cap == true) {
        result = result + value[i].toUpperCase();
      } else {
            result = result + value[i];
            cap = false;
      }
  }
  return result;
}

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

Here, the capitalization process ignores the whitespace, which is more accurate for your mobile app.

How to Capitalize the First letter of each word on TextField:

String capitalizeAllWord(String value) {
  var result = value[0].toUpperCase();
  for (int i = 1; i < value.length; i++) {
    if (value[i - 1] == " ") {
      result = result + value[i].toUpperCase();
    } else {
      result = result + value[i];
    }
  }
  return result;
}

TextFormField(
  controller: mytext1,
  onChanged: (value) {               
      mytext1.value = TextEditingValue(
          text: capitalizeAllWord(value), 
          selection: mytext1.selection
      );
  }
)

How to Capitalize First Letter of Each Sentence on TextField:

String capitalizeAllSentence(String value) {
  var result = value[0].toUpperCase();
  bool caps = false;
  bool start = true;

  for (int i = 1; i < value.length; i++) {
    if(start == true){
        if (value[i - 1] == " " && value[i] != " "){
            result = result + value[i].toUpperCase();
            start = false;
        }else{
            result = result + value[i];
        }
    }else{
      if (value[i - 1] == " " && caps == true) {
        result = result + value[i].toUpperCase();
        caps = false;
      } else {
          if(caps && value[i] != " "){
              result = result + value[i].toUpperCase();
              caps = false;
          }else{
              result = result + value[i];
          }
      }

      if(value[i] == "."){
          caps = true;
      }
    }  
  }
  return result;
}

TextFormField(
  controller: mytext2,
  onChanged: (value) {               
      mytext2.value = TextEditingValue(
          text: capitalizeAllSentence(value), 
          selection: mytext2.selection
      );
  }
)

Full Code Example:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 

  TextEditingController mytext = TextEditingController();
  TextEditingController mytext1 = TextEditingController();
  TextEditingController mytext2 = TextEditingController();

  String capitalize(String value) {
    var result = value[0].toUpperCase();
    bool cap = true;
    for (int i = 1; i < value.length; i++) {
        if (value[i - 1] == " " && cap == true) {
          result = result + value[i].toUpperCase();
        } else {
              result = result + value[i];
              cap = false;
        }
    }
    return result;
  }

  String capitalizeAllWord(String value) {
    var result = value[0].toUpperCase();
    for (int i = 1; i < value.length; i++) {
      if (value[i - 1] == " ") {
        result = result + value[i].toUpperCase();
      } else {
        result = result + value[i];
      }
    }
    return result;
  }

  String capitalizeAllSentence(String value) {
    var result = value[0].toUpperCase();
    bool caps = false;
    bool start = true;

    for (int i = 1; i < value.length; i++) {
      if(start == true){
          if (value[i - 1] == " " && value[i] != " "){
              result = result + value[i].toUpperCase();
              start = false;
          }else{
              result = result + value[i];
          }
      }else{
        if (value[i - 1] == " " && caps == true) {
          result = result + value[i].toUpperCase();
          caps = false;
        } else {
            if(caps && value[i] != " "){
                result = result + value[i].toUpperCase();
                caps = false;
            }else{
                result = result + value[i];
            }
        }

        if(value[i] == "."){
            caps = true;
        }
      }  
    }
    return result;
  }

  @override
  Widget build(BuildContext context) { 

    return  Scaffold(
          appBar: AppBar(
            title: Text("First Letter Uppercase"),
            backgroundColor: Colors.redAccent
          ),
          body: Container(
            padding: EdgeInsets.only(top:20, left:20, right:20),
            alignment: Alignment.topCenter,
            child: Column(
              children: [

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


                    TextFormField(
                      controller: mytext1,
                      onChanged: (value) {               
                          mytext1.value = TextEditingValue(
                              text: capitalizeAllWord(value), 
                              selection: mytext1.selection
                          );
                      }
                    ),


                    TextFormField(
                      controller: mytext2,
                      onChanged: (value) {               
                          mytext2.value = TextEditingValue(
                              text: capitalizeAllSentence(value), 
                              selection: mytext2.selection
                          );
                      }
                    )
                
            ],)
          )
       );
  }
}

Output Screenshot:

In this way, you can make first letter of string, first letter of each word, and first letter of each sentence in TextField and TextFormField in Flutter.