Flutter - Save Interaction or State When Switching Tabs - dart

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(),
),
);
}
}

Answer 1

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"))
],
),
],
),
);
}
}