Dynamically change keyboard type - Flutter - flutter

Question

I need to change the keyboard dynamically. the keyboard starts in TextInputType.text, when the user types 3 letters it is switched to TextInputType.number and the user types 4 numbers. ex: ABC1234.
final _controller = TextEditingController();
TextFormField(
decoration: InputDecoration(
labelText: "code",
hintText: 'ABC1234'),
controller: _myController,
keyboardType: TextInputType.text,
),

Answer 1

To change your TextInputType dynamically, what you can do is:
final _controller = TextEditingController();
//Creating a variable to store the type and initializing it with the default text type.
var keyboardType = TextInputType.text;
TextFormField(
decoration: InputDecoration(
labelText: "code",
hintText: 'ABC1234'),
controller: _myController,
//Passing the variable created in here
keyboardType: keyboardType,
onChanged: (value) {
//Checking if the value's length is less than 4, if it is, it should be type `text`.
if(value.isEmpty || value.length < 4) {
setState(() => keyboardType = TextInputType.text);
} else {
//Else, it should be type `number`
setState(() => keyboardType = TextInputType.number);
}
}
),
The will change the keyboard type dynamically but it may not change the keyboard, and you may have to close and open the keyboard again.

Answer 2

You can use keyboardType like this. It will be for both numbers and letters.
keyboardType: TextInputType.visiblePassword

Answer 3

Here is your working code
The keyboard is also changed automatically
final _controller = TextEditingController();
late FocusNode myFocusNode = FocusNode();
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: TextFormField(
style: Theme.of(context).textTheme.bodyText2,
controller: _controller,
focusNode: myFocusNode,
textCapitalization: TextCapitalization.characters,
keyboardType: (_controller.text.length >= 3) ? TextInputType.number : TextInputType.name,
onChanged: (text) {
if (_controller.text != text.toUpperCase()) {
_controller.value = _controller.value.copyWith(text: text.toUpperCase());
}
if (_controller.text.length == 3){
setState(() {
myFocusNode.unfocus();
Future.delayed(const Duration(milliseconds: 50)).then((value) {
myFocusNode.requestFocus();
});
});
}
},
inputFormatters: [
FilteringTextInputFormatter.allow(
RegExp('[a-zA-Z0-9]'))
],
decoration: const InputDecoration(labelText: 'ABC1234')),
),
),
);
}
Output:

Answer 4

Declare a variable like your controller for keyboardtype, where keyboardtype is variable and TextInputTupe is it's datatype.
TextInputType keyboardtype = TextInputType.text;
now, check yout textformfield's String, If your string.length is greater than 3 then keyboard type is TextInputType.number
check the length into onchanged in textformfield
final _controller = TextEditingController();
TextInputType keyboardType = TextInputType.text;
TextFormField(
decoration: InputDecoration(
labelText: "code",
hintText: 'ABC1234'),
controller: _myController,
keyboardType: TextInputType.text,
onChanged: (value){
var inputText = _myController.text;
if(inputText.length>3){
keyBoardType = TextInputType.number;
}
}
),
It would be better if you use some regex to check your inputformat into the inputFormatters in your textformfield. if you don't know about inputformatters just google it.