Flutter TabBarView build all tab widgets once at startup

Question

I'm currently trying to get a multi tabbed form working. I am using the package flutter_form_builder for that.

The problem is, that the FormBuilder requires all descendant form fields to be loaded at least once to run validations and to provide the correct value of the field. When the user visits every tab once the thing works fine, but I cannot assume that this will always happen.

The simplest solution in my eyes would be, to somehow get the TabBarView to render all tab pages at startup, so that every tab-widget and the form-fields exist.

I have the main page where I define the form builder and the tabview inside of it. The important part looks like this:

@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: 'title',
        bottom: TabBar(
          controller: tabController,
          tabs: <Widget>[
            Tab(icon: Icon(Icons.title)),
            Tab(icon: Icon(Icons.image)),
            Tab(icon: Icon(Icons.category)),
          ],
        ),
      ),
      body: FormBuilder(
          key: formBuilderKey,
          autovalidate: true,
          child: TabBarView(
            controller: tabController,
            children: <Widget>[
              MainTab(),
              CoverTab(),
              GroupsTab()
            ],
          )
        )
    );
}

One tab page looks more or less like this:

class GroupsTab extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return GroupsTabState();
  }
}

class GroupsTabState extends State<GroupsTab> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(10.0),
      child: Column(
        children: <Widget>[
            FormBuilderTextField(
                attribute: "name",
                decoration: InputDecoration(
                  labelText: "Name",
                  icon: Icon(Icons.title),
                ),
                validators: [FormBuilderValidators.required()],
            ),
            // Page content with form fields
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

I'm already using the AutomaticKeepAliveClientMixin to only call the build method of every tab page once but I need a bit more.

So my question: Is it possible to get the TabBarView to render all the widgets at startup or do you have an idea for a different solution.

Thank you all guys in advance

Answer 1

if it can help anyone

int currentTabIndex = 0;
@override
Widget build(BuildContext context) {
return DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      toolbarHeight: 0,
      bottom: TabBar(
        tabs: [
          Tab(_buildWidget1),
          Tab(_buildWidget2),
        ],
        onTap: (index) {
          setState(() {
            currentTabIndex = index;
          });
        },
      ),
    ),
    body: TabBarView(
      children: [
        if (currentTabIndex == 0) _buildWidget1() else Container(),
        if (currentTabIndex == 1) _buildWidget2() else Container(),
      ],
    ),
  ),
);
}