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

user_13942929 0
Viewed 3732

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!

textformfield onchange dart flutter textfield
2 Answers

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.

user_55239490

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