Flutter - Set focus to another TextFormField in onFieldSubmitted - dart

Question

I'm working with subsequent TextFormFields in an AlertDialog where the submit of an input should set the focus on the next input. I'm currently trying to achieve this using the following code:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MainScreen()
);
}
}
class MainScreen extends StatefulWidget {
#override
_MainScreenState createState() => new _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
final TextEditingController _firstFieldController = new TextEditingController();
final TextEditingController _secondFieldController = new TextEditingController();
FocusNode _focusNode ;
#override
void initState() {
super.initState();
_focusNode = new FocusNode();
}
#override
void dispose() {
_focusNode.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
var firstField = new TextFormField(
controller: _firstFieldController,
keyboardType: TextInputType.phone,
decoration: new InputDecoration(
labelText: 'First field',
contentPadding: new EdgeInsets.fromLTRB(.0, 8.0, .0, 4.0),
counterText: ' '
),
onFieldSubmitted: (String textInput) {
FocusScope.of(context).requestFocus(_focusNode);
},
);
var secondField = new TextFormField(
focusNode: _focusNode,
controller: _secondFieldController,
keyboardType: TextInputType.phone,
decoration: new InputDecoration(
labelText: 'Second field',
contentPadding: new EdgeInsets.fromLTRB(.0, 8.0, .0, 4.0),
counterText: ' '
),
);
return new Scaffold(
appBar: new AppBar(
title: new Text('Main'),
),
body: new Center(
child: new Text('Hello from the main screen!'),
),
floatingActionButton: new FloatingActionButton(
child: new Icon(Icons.add),
onPressed: () {
showDialog(
context: context,
child: new AlertDialog(
title: new Text('Form'),
content: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Container(
margin: new EdgeInsets.only(bottom: 4.0),
child: firstField
),
secondField
],
),
)
);
},
),
);
}
}
This is not setting the focus in the second field. However, if I close the dialog and open it again, the second field comes focused.
Can anyone help me with this?

Answer 1

That is because your AlertDialog needs to be in its own StatefulWidget. Your current code shows that your state, TextFields and AlertDialog are part of your MainScreen class, which means any updates has to happen first in the MainScreen context, while what you need is to have all your updates happen in the AlertDialog context instead.
TL;DR: Refactor your AlertDialog into its own StatefulWidget with TextFields, and FocusNode.