How to reset a Form in Flutter from another screen? How to reset a Form in Flutter from another screen? dart dart

How to reset a Form in Flutter from another screen?


example

Use, for example, a GlobalKey<FormState> to access the form states and reset() the fields.With this in mind, you can either:

  1. pass in the constructor of the second screen the first form fieldkey and reset both at the same time (when your data is doneprocessing to the server or so)

class Screen1 extends StatefulWidget {  _Screen1State createState() => _Screen1State();}class _Screen1State extends State<Screen1> {  final _formKeyScreen1 = GlobalKey<FormState>();  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('First screen'),      ),      body: Center(        child: Form(          key: _formKeyScreen1,          child: Column(            children: <Widget>[              TextFormField(),              TextFormField(),              TextFormField(),              RaisedButton(                child: Text('Navigate to second screen...'),                onPressed: () => Navigator.of(context).push(MaterialPageRoute(                      builder: (BuildContext context) => Screen2(_formKeyScreen1),                    )),              )            ],          ),        ),      ),    );  }}class Screen2 extends StatefulWidget {  final GlobalKey<FormState> firstScreenFormKey;  Screen2(this.firstScreenFormKey);  _Screen2State createState() => _Screen2State();}class _Screen2State extends State<Screen2> {  final _formKeyScreen2 = GlobalKey<FormState>();  void _processData() {    // Process your data and upload to server    _formKeyScreen2.currentState?.reset();    widget.firstScreenFormKey?.currentState?.reset();  }  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('Second screen'),      ),      body: Center(        child: Form(          key: _formKeyScreen2,          child: Column(            children: <Widget>[              TextFormField(),              TextFormField(),              TextFormField(),              RaisedButton(                child: Text('Submit data'),                onPressed: () => _processData(),              )            ],          ),        ),      ),    );  }}
  1. or, you can reset the first screen form when the second screen pops from the stack, which IMO, should be enough since I believe you're not accessing the first screen form data from the second after processing, thus, if it's just for presentation purposes, resetting on return should be enough. In which case you'll end with the following

class Screen1 extends StatefulWidget {  _Screen1State createState() => _Screen1State();}class _Screen1State extends State<Screen1> {  final _formKeyScreen1 = GlobalKey<FormState>();  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('First screen'),      ),      body: Center(        child: Form(          key: _formKeyScreen1,          child: Column(            children: <Widget>[              TextFormField(),              TextFormField(),              TextFormField(),              RaisedButton(                child: Text('Navigate to second screen...'),                onPressed: () {                  Navigator.of(context)                      .push(MaterialPageRoute(                        builder: (BuildContext context) => Screen2(),                      ))                      .then((_) => _formKeyScreen1.currentState.reset());                },              )            ],          ),        ),      ),    );  }}class Screen2 extends StatefulWidget {  _Screen2State createState() => _Screen2State();}class _Screen2State extends State<Screen2> {  final _formKeyScreen2 = GlobalKey<FormState>();  void _processData() {    // Process your data and upload to server    _formKeyScreen2.currentState?.reset();  }  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('Second screen'),      ),      body: Center(        child: Form(          key: _formKeyScreen2,          child: Column(            children: <Widget>[              TextFormField(),              TextFormField(),              TextFormField(),              RaisedButton(                child: Text('Submit data'),                onPressed: () => _processData(),              )            ],          ),        ),      ),    );  }}