How to send setState to Second Page in Flutter?

Issue

I have a basic question about send setState
to Second Page in the same class as this method like

_GoToNextPage(){
    Navigator.of(context).push(MaterialPageRoute(builder: (context) {...})
}

The problem is when I change background color in second page it doesn’t
change color in the same page But it changes the color of The prime home page.

This is the full code…

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: SetStateToSecondPage(),
    ));

class SetStateToSecondPage extends StatefulWidget {
  @override
  _SetStateToSecondPageState createState() => _SetStateToSecondPageState();
}

class _SetStateToSecondPageState extends State<SetStateToSecondPage> {
  Color color = Colors.deepPurpleAccent;
  bool Switch = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: color,
      appBar: AppBar(
        title: Text('setState to Second Page ?'),
        elevation: 0.0,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                setState(() {
                  Switch = !Switch;

                  color = Switch ? Colors.white : Colors.green;
                });
              },
              child: Text('Change Back GroundColor'),
            ),
            RaisedButton(
              onPressed: () {
                _GoToNextPage(context);
              },
              child: Text('To Next Page..'),
            ),
          ],
        ),
      ),
    );
  }

//------------- This is second Page ----------//

  _GoToNextPage(BuildContext context) {
    return Navigator.of(context).push(MaterialPageRoute(builder: (context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Second Page'),
        ),
        backgroundColor: color,
        body: Center(
          child: RaisedButton(
            onPressed: () {
              setState(() {
                color = Colors.red;
              });
            },
            child: Text('Change Back GroundColor'),
          ),
        ),
      );
    }));
  }
}

thanks

Solution

SetState is specific to the object you are in . and when you call it you notify the framework that the state has changed . so calling setState in _SetStateToSecondPageState will not affect Second Page so you need to create another StatefulWidget

class SecondPage extends StatefulWidget {
  MaterialColor secondColor ;
  SecondPage({this.secondColor});
  @override
  _SecondPageState createState() => new _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      backgroundColor: widget.secondColor,
      body: Center(
        child: RaisedButton(
          onPressed: () {
            setState(() {
              widget.secondColor = Colors.amber;
            });
          },
          child: Text('Change Back GroundColor'),
        ),
      ),
    );
  }
}

and when you call _GoToNextPage use the SecondPage constructor to change the color

  _GoToNextPage(BuildContext context) {
    return Navigator.of(context).push(MaterialPageRoute(builder: (context) {
      return SecondPage(
      );
    }));
  }

Answered By – Raouf Rahiche

Answer Checked By – Senaida (FlutterFixes Volunteer)