CODEWITHSUNDEEP
flutterdart
roee attias
roee attias

Reputation: 183

Move focus automatic from TextFormField to other (phone verify)

I want to build a flutter app that when the user start typing in the first field after one number it will loos focus on the field that the user typed in and move the focus automatically to the next phone text field and backwards when I deleting the numbers
this is my code:

class GetPhoneCode extends StatefulWidget {
  const GetPhoneCode({Key? key}) : super(key: key);
  @override
  _GetPhoneCodeState createState() => _GetPhoneCodeState();
}
class _GetPhoneCodeState extends State<GetPhoneCode> {
  final codeP1 = GlobalKey<FormState>();
  final codeP2 = GlobalKey<FormState>();
  final codeP3 = GlobalKey<FormState>();
  final codeP4 = GlobalKey<FormState>();
  final codeP5 = GlobalKey<FormState>();
  final codeP6 = GlobalKey<FormState>();
  String codeP1S = "";
  String codeP2S = "";
  String codeP3S = "";
  String codeP4S = "";
  String codeP5S = "";
  String codeP6S = "";
  bool isFocus1 = true;
  bool isFocus2 = true;
  bool isFocus3 = true;
  bool isFocus4 = true;
  bool isFocus5 = true;
  bool isFocus6 = true;
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: Column(
        Padding(
          padding: EdgeInsets.only(top: size.width * .07),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              PhoneCodeTextField(size, codeP1S, isFocus1, codeP1)                      
              SizedBox(width: size.width * .040,),
              PhoneCodeTextField(size, codeP2S, isFocus2, codeP2),
              SizedBox(width: size.width * .040,),
              PhoneCodeTextField(size, codeP3S, isFocus3, codeP3),
              SizedBox(width: size.width * .040,),
              PhoneCodeTextField(size, codeP4S, isFocus4, codeP4),
              SizedBox(width: size.width * .040,),
              PhoneCodeTextField(size, codeP5S, isFocus5, codeP5),
              SizedBox(width: size.width * .040,),
              PhoneCodeTextField(size, codeP6S, isFocus6, codeP6),
            ],
          ),
        ),
      ),
    );
  }
Container PhoneCodeTextField(Size size, String variable, bool isFucos, GlobalKey key) {
    return Container(
      width: size.width * .07,
      child: Form(
        key: key,
        child: TextFormField(
          decoration: const InputDecoration(
            counterText: "",
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(
                color: Colors.black,
                width: 2.0,
              ),
            ),
            border: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.black),
            ),
          ),
          maxLength: 1,
          autofocus: isFucos,
          textAlign: TextAlign.center,
          keyboardType: TextInputType.number,
        ),
      ),
    );
  }
}

Someone know what do I need to add my code so it will work?
Thanks.

Upvotes: 0

Views: 97

Answers (1)

Tembero
Tembero

Reputation: 407

You could try if FocusNode would fit your needs. Then use the onFieldSubmitted on the TextFormField

You could do something like this:

// Build method

FocusNode secondFieldFocus = FocusNode();

return Row(
  children: [
    TextFormField(
      onFieldSubmitted: (String value) {
         FocusScope.of(context).requestFocus(secondFieldFocus);
       },
    ),
    TextFormField(focusNode: secondFieldFocus);
  ]
);

Upvotes: 2

Related Questions