How to keep the TextField value when changing the tab(multiple)? - flutter

Question

I don't know why that the TextField input will missing when changing tab.
How to keep the data when changethe tab?
I don't know why it will dismiss. Did I need add the controller for TextField?
For example, I input in "one"
Then go to "two" and input
Back to "one", the textfield data will missing.
same think also occur in bottom tab
Sources code:
import "package:flutter/material.dart";
class MultiTabScreen extends StatefulWidget {
#override
_MultiTabScreen createState() => _MultiTabScreen();
}
class _MultiTabScreen extends State<MultiTabScreen>
with SingleTickerProviderStateMixin {
TabController tabController;
String title = "Home";
#override
void initState() {
super.initState();
tabController = new TabController(length: 3, vsync: this);
}
#override
void dispose() {
tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.purple,
brightness: Brightness.light,
accentColor: Colors.red),
darkTheme: ThemeData(
brightness: Brightness.dark,
),
home: new Scaffold(
appBar: AppBar(
title: Text(title),
centerTitle: true,
),
body: TabBarView(
children: <Widget>[
FirstTab(),
MyBody("Page Two"),
MyBody("Page Three")
],
// if you want yo disable swiping in tab the use below code
// physics: NeverScrollableScrollPhysics(),
controller: tabController,
),
bottomNavigationBar: Material(
color: Colors.purple,
child: TabBar(
onTap: (indedx) {
if (indedx == 0) {
setState(() {
title = "Home";
});
} else if (indedx == 1) {
setState(() {
title = "Tab Two";
});
} else if (indedx == 2) {
setState(() {
title = "Tab Three";
});
}
},
indicatorColor: Colors.blue,
unselectedLabelColor: Colors.grey,
tabs: <Widget>[
Tab(
icon: Icon(Icons.favorite_border),
text: "ONE",
),
Tab(
icon: Icon(Icons.favorite),
text: "TWO",
),
Tab(
icon: Icon(Icons.add_box),
text: "THREE",
),
],
controller: tabController,
),
),
));
}
}
class FirstTab extends StatefulWidget {
#override
FirstTabState createState() => FirstTabState();
}
class FirstTabState extends State<FirstTab>
with SingleTickerProviderStateMixin {
TabController tabController;
#override
void initState() {
super.initState();
tabController = new TabController(length: 3, vsync: this);
}
#override
void dispose() {
tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: Container(
height: 50.0,
child: new TabBar(
indicatorColor: Colors.blue,
unselectedLabelColor: Colors.grey,
labelColor: Colors.blue,
tabs: [
Tab(
text: "ONE",
),
Tab(
text: "TWO",
),
Tab(
text: "THREE",
),
],
),
),
),
body: TabBarView(
children: [
Container(
width: 300.0,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Number',
),
),
),
Container(
width: 300.0,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Number',
),
),
),
Container(
width: 300.0,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Number',
),
),
),
],
),
),
);
}
}
class MyBody extends StatelessWidget {
final String title;
MyBody(this.title);
final mySnackBar = SnackBar(
content: Text(
"Hello There!",
style: TextStyle(color: Colors.white),
),
duration: Duration(seconds: 3),
backgroundColor: Colors.blue,
);
#override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 300.0,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Number',
),
),
),
],
),
);
}
}

Answer 1

From your source code, I can see you are not storing your value.
you should store it in some variables.
there are two types of them.
String value = "";
TextField(
onChanged: (text) {
value = text;
},
)
or you can use a controller too.
TextEditingController controller = TextEditingController();
TextField(
controller: controller,
)
If doesn't work try with global Scope that means declare variable outside of Class...