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!

Zackzackariah

see TextInputFormatter – Russophobe

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();
          },
        ),
      ],
    );
  }
}

Unmoved

Answer 2

Text field which does not allow spaces, using RegExp. As below-

            TextFormField(
               inputFormatters: [
                if (denySpaces)
                  FilteringTextInputFormatter.deny(
                      RegExp(r'\s')),
              ])

Above solution worked for me, to block space from keyboard.

Eliott

Seems a robust solution against the combination of FocusNode and TextEditingController – Bellaude

What is the variable denySpaces? – Horror

Answer 3

Another option to disable the possibility of writing spaces in a TextField, you can use an input formatter to restrict the allowed characters.

import 'package:flutter/services.dart';

class NoSpaceFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    // Check if the new value contains any spaces
    if (newValue.text.contains(' ')) {
      // If it does, return the old value
      return oldValue;
    }
    // Otherwise, return the new value
    return newValue;
  }
}

We created a new class called NoSpaceFormatter that extends TextInputFormatter. The formatEditUpdate() method is called whenever the user types or deletes a character in the TextField.

Inside the formatEditUpdate() method, we check if the new value contains any spaces by calling the contains() method on the text property of the newValue parameter. If it does contain spaces, we return the oldValue, which prevents the user from typing the space character. Otherwise, we return the newValue, which allows the user to type the character.

To use the NoSpaceFormatter class in a TextField, you can set the inputFormatters property to a list containing an instance of the formatter:

TextField(
  inputFormatters: [NoSpaceFormatter()],
  // Other properties...
)

Ivy

Answer 4

    TextFormField(
       style: const TextStyle(fontSize: 30),
              inputFormatters: [
                  FilteringTextInputFormatter.deny(
                     RegExp(r'\s')),
        ],
   )

Nobody

Answer 5

I'm success with:

TextField(
   inputFormatters: [
     FilteringTextInputFormatter.deny(RegExp(r'\s')), 
   ],
),

Judijudicable