Using FocusNode in TextFormField Flutter

Question

I have a TextFormField that is supposed to receive digits. On entry of first digit it should jump to second TextFormField then to the third TextFormField. Each TextFormField has the FocusNode property I just do not know how to use it. I have this

TextFormField(     //First Field                            
     autofocus: true,
     focusNode: FocusNode(),
     decoration: InputDecoration(
     border: OutlineInputBorder(
     borderRadius: BorderRadius.circular(4.0)
      ),
      ),
     style: TextStyle(
      color: Colors.orange,
      fontSize: 15.0,
      ),
     keyboardType:
      TextInputType.number,
     maxLength: 1,
      ),

    // second Field
   TextFormField(),

    //third Field

Answer 1

I believe this is more or less what you are trying to achieve:

void main() {
  runApp(MaterialApp(home: PassCodeExample()));
}

class PassCodeExample extends StatelessWidget {
  FocusNode f1 = FocusNode();
  FocusNode f2 = FocusNode();
  FocusNode f3 = FocusNode();
  FocusNode f4 = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Flexible(
                  child: TextField(
                    focusNode: f1,
                    keyboardType: TextInputType.number,
                    onChanged: (String newVal) {
                      if (newVal.length == 1) {
                        f1.unfocus();
                        FocusScope.of(context).requestFocus(f2);
                      }
                    },
                    decoration: InputDecoration(border: OutlineInputBorder()),
                  ),
                ),
                Flexible(
                  child: TextField(
                    focusNode: f2,
                    keyboardType: TextInputType.number,
                    onChanged: (String newVal) {
                      if (newVal.length == 1) {
                        f2.unfocus();
                        FocusScope.of(context).requestFocus(f3);
                      }
                    },
                    decoration: InputDecoration(border: OutlineInputBorder()),
                  ),
                ),
                Flexible(
                  child: TextField(
                    focusNode: f3,
                    keyboardType: TextInputType.number,
                    onChanged: (String newVal) {
                      if (newVal.length == 1) {
                        f3.unfocus();
                        FocusScope.of(context).requestFocus(f4);
                      }
                    },
                    decoration: InputDecoration(border: OutlineInputBorder()),
                  ),
                ),
                Flexible(
                  child: TextField(
                    focusNode: f4,
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(border: OutlineInputBorder()),
                  ),
                ),
              ]),
        ),
      ),
    );
  }
}

You can achieve the same by using onSubmitted or even supplying a unique TextEditingController to your TextFields