Flutter & Textfield : How do I restrict my user from using space in textfield by automatically removing that space?

Question

How do I restrict my user from using space in textfield by automatically removing that space when the user finish typing?

For example, if the user type King of Light, it will apply as KingofLight after he/she steps away from the textfield.

TextFormField(
                          initialValue: nickname != null
                              ? nickname
                              : current_user.nickname,
                          decoration: InputDecoration(
                            border: new OutlineInputBorder(
                              borderSide: new BorderSide(color: Colors.grey),
                              borderRadius: BorderRadius.circular(6),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.grey, width: 1.0),
                              borderRadius: BorderRadius.circular(6),
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.grey, width: 1.0),
                              borderRadius: BorderRadius.circular(6),
                            ),
                            hintText: 'Empty',
                            hintStyle: TextStyle(
                              color: Colors.grey[400],
                              fontSize: 20,
                              //fontWeight: FontWeight.bold,
                            ),
                          ),
                          style: TextStyle(
                            fontSize: 20,
                            // fontWeight: FontWeight.bold,
                          ),
                          validator: (val) => val.length < 2
                              ? 'Enter a nickname 2+char long'
                              : null,
                          onChanged: (val) {
                            val = val.replaceAll(' ', '');
                            setState(() => nickname = val);
                          },
                        ),

please help me! thank you!

Answer 1

One way you do this is like this using TextEditingController and can call formatNickname() as per your use case.

class _MyWidgetState extends State<MyWidget>{
  
  FocusNode node = new FocusNode();
  TextEditingController tc = TextEditingController();
  
  @override
  void initState(){
    node.addListener((){
      if(!node.hasFocus){
        formatNickname();
      }
    });
    super.initState();
  }
  
  void formatNickname(){
    tc.text = tc.text.replaceAll(" ", "");
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextFormField(
          focusNode: node,
          controller: tc,
        ),
        TextFormField(),
        RaisedButton(
          child: Text('Format'),
          onPressed: (){
            formatNickname();
          },
        ),
      ],
    );
  }
}