I have three pages. Third page gets text input and passes it to the text widget of the second page. When the second page closed and opened again, previous data is getting lost. I want to save the data even the page closed.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You are welcome',style: (TextStyle(fontWeight: FontWeight.bold, fontSize: 15,color: Colors.black)),
),
RaisedButton.icon(
label: Text("Go to second page",style: (TextStyle(fontWeight: FontWeight.bold, fontSize: 18,color: Colors.white)),),
icon: Icon(Icons.pages),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
},
color: Colors.red,
),
],
),
),
);
}
}
class SecondPage extends StatefulWidget {
@override
_SecondPageState createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
String _information = 'No Information Yet';
void updateInformation(String information) {
setState(() => _information = information);
}
void moveToSecondPage() async {
final information = await Navigator.push(
context,
CupertinoPageRoute(
fullscreenDialog: true, builder: (context) => ThirdPage()),
);
updateInformation(information);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Page"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
_information,style: (TextStyle(fontWeight: FontWeight.bold, fontSize: 15,color: Colors.black))
),
SizedBox(
height: 8.0,
),
RaisedButton(
color: Colors.purple,
child: Text(
'Get Information',
style: TextStyle(color: Colors.white),
),
onPressed: () {
moveToSecondPage();
},
)
],
),
),
);
}
}
class ThirdPage extends StatelessWidget {
final TextEditingController textController = new TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
autofocus: true,
style: TextStyle(fontSize: 20.0),
controller: textController,
),
),
SizedBox(
height: 8.0,
),
RaisedButton(
child: Text(
'Submit',
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
onPressed: () {
Navigator.pop(context, textController.text);
},
)
],
)),
);
}
}
Your question has been asked several times already. The answer is up to you. This is a state management problem. It's a very large domain, you need to understand and pick one of the state management solutions then apply it to your app.
However you can pass the state between pages using wrapper classes, maps, global variables. This is not recommended and will cause problems as your app grows. Here is a solution that uses a wrapper class to pass the string value between pages.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class InformationWrapper {
String data = 'No Information Yet';
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
InformationWrapper _information = InformationWrapper();
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You are welcome',
style: (TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: Colors.black)),
),
RaisedButton.icon(
label: Text(
"Go to second page",
style: (TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
color: Colors.white)),
),
icon: Icon(Icons.pages),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(
information: widget._information,
)),
);
},
color: Colors.red,
),
],
),
),
);
}
}
class SecondPage extends StatefulWidget {
final InformationWrapper information;
const SecondPage({Key key, this.information}) : super(key: key);
@override
_SecondPageState createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
void updateInformation(String information) {
setState(() => widget.information.data = information);
}
void moveToSecondPage() async {
final information = await Navigator.push(
context,
CupertinoPageRoute(
fullscreenDialog: true, builder: (context) => ThirdPage()),
);
updateInformation(information);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Page"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(widget.information.data,
style: (TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: Colors.black))),
SizedBox(
height: 8.0,
),
RaisedButton(
color: Colors.purple,
child: Text(
'Get Information',
style: TextStyle(color: Colors.white),
),
onPressed: () {
moveToSecondPage();
},
)
],
),
),
);
}
}
class ThirdPage extends StatelessWidget {
final TextEditingController textController = new TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
autofocus: true,
style: TextStyle(fontSize: 20.0),
controller: textController,
),
),
SizedBox(
height: 8.0,
),
RaisedButton(
child: Text(
'Submit',
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
onPressed: () {
Navigator.pop(context, textController.text);
},
)
],
)),
);
}
}