Flutter: how to manage forms in tabs - forms

Question

I have a tabbar with three tabs with a different form for each one. I have a save button on the bottom to save all of them.
Problem is, the three form's globalkeys currentstate are accessible only when the relative tab is active.
So the formkey1.currentstate is null when I'm in tab 2 and 3, and so on.
Note that I'm managing state with provider.
Any clues on how to solve this?
Here is a short version of the code:
class Myclass extends StatelessWidget{
final _formKey1 = GlobalKey<FormState>();
final _formKey2 = GlobalKey<FormState>();
final _formKey3 = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return DefaultTabController(length: 3, child:
Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(text: "TAB ONE"),
Tab(text: "TAB TWO"),
Tab(text: "TAB THREE"),
],
),
),
bottomNavigationBar:
child: Row(
children: [
FlatButton(
onPressed: (){
_save(context);
},
child: Text("Save"),
),
],
)
),
body: TabBarView(children: [
Form(key: _formKey1, ...),
Form(key: _formKey2, ...),
Form(key: _formKey3, ...),
])
),);
}
void _save(BuildContext context) async {
print(_formKey1.currentState); // NULL ON TAB 2 AND 3
print(_formKey2.currentState); // NULL ON TAB 1 AND 3
print(_formKey3.currentState); // NULL ON TAB 1 AND 2
//my save procedure
}}

Answer 1

You should use AutomaticKeepAliveClientMixin for each TabView page if you want to keep their states. Also you can you use a KeepAliveWrapper to wrap each page.
Here is the code:
class KeepAliveWrapper extends StatefulWidget {
final Widget child;
const KeepAliveWrapper({Key key, this.child}) : super(key: key);
#override
__KeepAliveWrapperState createState() => __KeepAliveWrapperState();
}
class __KeepAliveWrapperState extends State<KeepAliveWrapper>
with AutomaticKeepAliveClientMixin {
#override
Widget build(BuildContext context) {
super.build(context);
return widget.child;
}
#override
bool get wantKeepAlive => true;
}
Use it like this:
KeepAliveWrapper(
child: Form(
key: _formKey1,
child: Container(),
),
)
Note that before visiting each tab, your sub pages are still not built.

Answer 2

you also can use instances of class (Model) to store data while navigating each page

Answer 3

You can navigate to a new page (new class) which contains a form. For these 3 forms you can create 3 classes and at the tab bar you can navigate into those 3 classes. Inside a class you can nicely handle your form. No difference in the view! just try it!