Flutter save page content after routing

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