Flutter save page content after routing - flutter

Question

i have a favorite icon that exist on page (A) that changes it's color whenever i click, the problem is when i move to another page and go back to page (A) icon goes to regular color, it doesn't save the changes on page , is there a way to keep the changes even after moving from page to page ?
Thanks.

Answer 1

If you push and pop back, then you can find the saved state from the route. How-ever if you pop back, current page state will be removed from stack. To handle this, you need to use state-management property. You can use StateProvider in this case, or the thing that suit for your project.
Demo:
class PageA extends StatefulWidget {
PageA({Key? key}) : super(key: key);
#override
_PageAState createState() => _PageAState();
}
class _PageAState extends State<PageA> {
Color color = Colors.deepOrange;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("PAge A"),
),
body: Center(
child: Column(
children: [
Container(
width: 400,
height: 400,
color: color,
alignment: Alignment.center,
child: Text("init Color:deepOrange "),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => PageB(),
));
},
child: Text("Move to B"),
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
color = Colors.deepPurple;
});
},
),
);
}
}
class PageB extends StatefulWidget {
const PageB({Key? key}) : super(key: key);
#override
_PageBState createState() => _PageBState();
}
class _PageBState extends State<PageB> {
Color color = Colors.greenAccent;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("PAge B"),
),
body: Center(
child: Column(
children: [
Container(
width: 400,
height: 400,
color: color,
alignment: Alignment.center,
child: Text("init Color:greenAccent "),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => PageC(),
),
);
},
child: Text("Move to C"),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Move Back to A, you can find last saved state"),
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
color = Colors.black;
});
},
),
);
}
}
class PageC extends StatefulWidget {
PageC({Key? key}) : super(key: key);
#override
_PageCState createState() => _PageCState();
}
class _PageCState extends State<PageC> {
Color color = Colors.amberAccent;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("PAge C"),
),
body: Center(
child: Column(
children: [
Container(
width: 400,
height: 400,
color: color,
child: Center(child: Text("init Color:amberAccent ")),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => PageB(),
),
);
},
child: Text("Push to B, will assing new state on route"),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
"pop to B\n if you pop then current state of Page B will be visible"),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
color = Colors.pink;
});
},
),
);
}
}