Flutter & Textfield : How do I restrict my user from using space in textfield by automatically removing that space?
1,799
Solution 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();
},
),
],
);
}
}
Solution 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.
Author by
Punreach Rany
Updated on November 25, 2022Comments
-
Punreach Rany over 1 year
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 asKingofLight
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!
-
pskink over 3 yearssee
TextInputFormatter
-