Flutter Textfield Capitalize Each Word

Question

class InputMdnWidget extends StatefulWidget {
  const InputMdnWidget({Key key}) : super(key: key);
  @override
  _InputMdnWidgetState createState() => _InputMdnWidgetState();
}

class _InputMdnWidgetState extends State<InputMdnWidget> {
  TextEditingController _controller;
  
  @override
  void initState() {

    super.initState();
    _controller = TextEditingController();
  }
  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      textCapitalization: TextCapitalization.words       
    );
  }
}

i'm new to flutter, i have a textfield and using a controller, i want to make the text that the user typed into camel case, for example the user types "lala lala", the text in the textfield will change to "Lala Lala", is this possible and how?

I use textCapitalization: TextCapitalization.words doesn't work

Answer 1

You can try using TextInputFormatters. These make input conform to particular patterns, and can be supplied to TextFields like so:

TextField(
  controller: _controller,
  inputFormatters: [MyInputFormatter()],       
);

If you want custom formatting, and I think you're wanting "title case," you can create your own TextInputFormatter by extending the class like this:

import 'package:flutter/services.dart';

class TitleCaseInputFormatter extends TextInputFormatter {
  String textToTitleCase(String text) {
    if (text.length > 1) {
      return text[0].toUpperCase() + text.substring(1);
      /*or text[0].toUpperCase() + text.substring(1).toLowerCase(), if you want absolute title case*/
    } else if (text.length == 1) {
      return text[0].toUpperCase();
    }

    return '';
  }

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    String formattedText = newValue.text
        .split(' ')
        .map((element) => textToTitleCase(element))
        .toList()
        .join(' ');
    return TextEditingValue(
      text: formattedText,
      selection: newValue.selection,
    );
  }
}

Again, use it like this:

TextField(
  controller: _controller,
  inputFormatters: [TitleCaseInputFormatter()],       
);