How to Force Capital/Small Letter Input on TextField in Flutter

In this example, we are going to show you how to open a capital letter or small letter keyboard on TextField or Force the capital or small letter input, or first letter capital input on TextField and TextFormField in Flutter. See the example for more details:

TextField(
  textCapitalization: TextCapitalization.characters,
)

In this TextField, the capital letter keyboard will popup when focused. Users can switch to the small letter, but at the initial, the capital letter keyboard gets popuped. 

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

More Accurate Way (ignores whitespace): How to Capitalize String, Word, Sentence on TextField in Flutter

In this case, even if the user switches the keyboard to a small letter, the input always is on Capital Letter.

If you want to capitalize the first letter of each word and sentence, or also want to ignore the space, see this example: How to Capitalize First Letter of Word and Sentence in Flutter

TextEditingController mytext1 = TextEditingController();
TextField(
  controller: mytext1,
  onChanged: (value) {               
      mytext1.value = TextEditingValue(
          text: value.toLowerCase(), 
          selection: mytext1.selection
      );
  }
)

Here, the user is forced to input in the small letter even if they open the capital keyboard in Flutter.

TextEditingController mytext2 = TextEditingController();
String capitalize(String value) {
  if(value.trim().isEmpty){
      return "";
  }else{
      return "${value[0].toUpperCase()}${value.substring(1).toLowerCase()}";
  }
}

OR: (Ignores Whitespace), use one function among these two capitalize() functions:

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: mytext2,
  onChanged: (value) {               
      mytext2.value = TextEditingValue(
          text: capitalize(value), 
          selection: mytext2.selection
      );
  }
)

Here, the first letter of the text field will always be the capital letter, no matter what type of keyboard is open. 

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;
  }
 
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          body: Container(
            padding: EdgeInsets.only(top:80, left:20, right:20),
            alignment: Alignment.center,
            child: Column(
              children: [
                TextField( //capital letter keyboard popup
                  textCapitalization: TextCapitalization.characters,
                ),

                TextField( //forece capital letter input
                  controller: mytext,
                  onChanged: (value) {               
                      mytext.value = TextEditingValue(
                          text: value.toUpperCase(), 
                          selection: mytext.selection
                      );
                  }
                ),

                TextField( //forece small letter input
                  controller: mytext1,
                  onChanged: (value) {               
                      mytext1.value = TextEditingValue(
                          text: value.toLowerCase(), 
                          selection: mytext1.selection
                      );
                  }
                ), 

                TextField( //force first letter capital input
                  controller: mytext2,
                  onChanged: (value) {               
                      mytext2.value = TextEditingValue(
                          text: capitalize(value), 
                          selection: mytext2.selection
                      );
                  }
                ),
            ],)
          )
       );
  }
}

In this way, you can open the capital letter keyboard while inputting on TextField of force capital or small letter input, or first letter capital letter input on TextField in Flutter. 

No any Comments on this Article


Please Wait...