title: Flutter - Save Interaction or State When Switching Tabs
body: <p>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?</p>
  
  <p>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.</p>
  
  <pre><code>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() =&gt; new _MyTabbedPageState();
  }
  
  class _MyTabbedPageState extends State&lt;MyTabbedPage&gt;
      with SingleTickerProviderStateMixin {
    final List&lt;Tab&gt; myTabs = &lt;Tab&gt;[
      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(),
        ),
      );
    }
  }
  </code></pre>