Flutter - Save Interaction or State When Switching Tabs

Question

I am learning flutter and currently testing different aspects of it for app development. My eventual plan is to have two tabs, each pulling a list from an API and displaying it in a list view. My concern is that it seems every time you switch tabs, the tabs get fully redrawn as new. How do I save the current state of a tab and all the children so they don't reset when I visit the tab again? Am i thinking about i wrong? Am I supposed to manually save everything to variables and re-populate it every time the tab is drawn?

Below is a quick example I have been testing. It is a simple two tab app with form fields on each page. If I run the app, then type something into the form field, when I switch to tab two and back, the contents of the form field have been removed.

import 'package:flutter/material.dart';

void main() {
  print("start");
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Tab Test',
      home: new MyTabbedPage(),
    );
  }
}

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({Key key}) : super(key: key);
  @override
  _MyTabbedPageState createState() => new _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'LEFT'),
    new Tab(text: 'RIGHT'),
  ];

  TabController _tabController;
  var index = 0;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(
        vsync: this, length: myTabs.length, initialIndex: index);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        bottom: new TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {
          return new Center(
              child: new TextFormField(
            decoration: new InputDecoration(labelText: 'Type Something:'),
          ));
        }).toList(),
      ),
    );
  }
}

Possible duplicate of [Flutter: Default Tab Bar Controller does not maintain state after swipe](https://stackoverflow.com/questions/50979157/flutter-default-tab-bar-controller-does-not-maintain-state-after-swipe) — Johnykutty, Apr 24 '19 at 09:26

score 0 · Accepted Answer · answered Jun 11 '18 at 17:27

So, i think I found the answer in setState. I reworked my sample above to have a button that increments a counter on each tab respectively. Using setState to update the vote count allows me to save the state of the field and persist it when I changes tabs. I am adding my sample code below for reference.

import 'package:flutter/material.dart';

void main() {
  print("start");
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Tab Test',
      home: new MyTabbedPage(),
    );
  }
}

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({Key key}) : super(key: key);
  @override
  _MyTabbedPageState createState() => new _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'LEFT'),
    new Tab(text: 'RIGHT'),
  ];

  TabController _tabController;
  var index = 0;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(
        vsync: this, length: myTabs.length, initialIndex: index);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  int votesA = 0;
  int votesB = 0;
  void voteUpA() {
    setState(() => votesA++);
  }
  void voteUpB() {
    setState(() => votesB++);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        bottom: new TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: <Widget>[
          new Column(
            children: <Widget>[
              Text("Hello Flutter - $votesA"),
              new RaisedButton(onPressed: voteUpA, child: new Text("click here"))
            ],
          ),
          new Column(
            children: <Widget>[
              Text("Hello Flutter - $votesB"),
              new RaisedButton(onPressed: voteUpB, child: new Text("click here"))
            ],
          ),
        ],
      ),
    );
  }
}

Please note, I had another issue with a set up similar to this that you can find answered on another question [here](https://stackoverflow.com/questions/50859815/flutter-stateful-widget-doesnt-save-counter-state-when-switching-tabs) in addition to this answer — casmang, Jun 15 '18 at 21:47

Flutter - Save Interaction or State When Switching Tabs

1 Answers1