Flutter 变量在更改时不会更改背景颜色？

Question

I'm new to flutter and am trying to update the background color of a scaffold when a variable is changed. the variable is declared in another file. The reason why it needs to change? I am trying to change the background of the app to grey, a dark mode option. Any advice on why the background doesn't change when the variable does? Any advice would be appreciated, thanks!

import 'package:flutter/material.dart';
import 'package:page_transition/page_transition.dart';
import 'package:share/share.dart';

import './Widgets/DrawerSettings.dart';

void main() {
runApp(MaterialApp(
title: 'Navigation Basics',
home: FirstRoute(),
 ));
}
class FirstRoute extends StatefulWidget {
@override
_FirstRouteState createState() => _FirstRouteState();
}

class _FirstRouteState extends State<FirstRoute> {
@override
Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
    drawer: Container(
      width: 70,
      child: ClipRRect(
        borderRadius: BorderRadius.vertical(top: Radius.circular(.0)),
        child: Drawer(
          child: Padding(
            padding: const EdgeInsets.fromLTRB(0, 30, 0, 0),
            child: Column(
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.bookmark),
                  onPressed: () {
                    Navigator.push(
                        context,
                        PageTransition(
                            type: PageTransitionType.rightToLeft,
                            child: SavedRoute()));
                  },
                ),
                IconButton(
                  icon: Icon(Icons.rate_review),
                  onPressed: () {
                    Navigator.push(
                        context,
                        PageTransition(
                            type: PageTransitionType.rightToLeft,
                            child: ReviewRoute()));
                  },
                ),
                IconButton(
                  icon: Icon(Icons.share),
                  onPressed: () {
                    Share.share('Share');
                  },
                ),
                IconButton(
                  icon: Icon(Icons.settings),
                  onPressed: () {
                    Navigator.push(
                        context,
                        PageTransition(
                            type: PageTransitionType.rightToLeft,
                            child: SettingsRoute()));
                  },
                )
              ],
            ),
          ),
        ),
      ),
    ),
    appBar: AppBar(
      title: Text(
        'Explore',
      ),
      centerTitle: true,
      backgroundColor: Colors.cyan[500],
    ),
    body: Scaffold(
      backgroundColor: DarkMode ? Colors.grey[800] : Colors.white, //Here is the code to change the background color when variable change.
      body: Padding(
        padding: const EdgeInsets.fromLTRB(2, 12, 2, 12),
        child: Center(
          child: ListView(
            shrinkWrap: true,
            padding: EdgeInsets.all(5.0),
            children: <Widget>[
              Column(
                children: [
                  Container(
                    padding: EdgeInsets.fromLTRB(2, 10, 2, 0),
                    height: 150,
                    width: double.maxFinite,
                    child: InkWell(
                      onTap: () {
                        Navigator.push(
                            context,
                            PageTransition(
                                type: PageTransitionType.rightToLeft,
                                child: SecondRoute()));
                      },
                      child: Card(
                        elevation: 5,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(15.0),
                          child: Image.network(
                            'https://i.ytimg.com/vi/hlWiI4xVXKY/maxresdefault.jpg',
                            fit: BoxFit.cover,
                            height: 150.0,
                            width: 100.0,
                          ),
                        ),
                      ),
                    ),
                  ),
               ],
          ),
        ),
      ),
    ),
  ),
);
}
}

Here is the second file

import 'package:flutter/material.dart';

class SettingsRoute extends StatefulWidget {
@override
_SettingsRouteState createState() => _SettingsRouteState();
}

bool DarkMode = false;

class _SettingsRouteState extends State<SettingsRoute> {
@override
Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
    backgroundColor: DarkMode ? Colors.grey[800] : Colors.white,
    appBar: AppBar(
      title: Text(
        'Settings',
      ),
      centerTitle: true,
    ),
    body: ListView(
      children: <Widget>[
        Container(
          child: Padding(
            padding: const EdgeInsets.fromLTRB(20, 20, 10, 20),
            child: SwitchListTile(
              title: Text(
                'Dark Mode',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.w400,
                  color: DarkMode ? Colors.white : Colors.grey[800],
                ),
              ),
              value: DarkMode,
              activeColor: Colors.white,
              inactiveThumbColor: Colors.white,
              onChanged: (bool value) {
                setState(() {
                  DarkMode = !DarkMode;
                });
              },
            ),
          ),
        ),
      ],
    ),
  ),
);
}
}

Answer 1

You can copy paste run full code below
You can pass callback refresh to SettingsRoute and call with widget.callback()
You can see working demo below
code snippet

class _FirstRouteState extends State<FirstRoute> {
  refresh() {
    setState(() {});
  }
...  
onPressed: () {
      Navigator.push(
          context,
          PageTransition(
              type: PageTransitionType.rightToLeft,
              child: SettingsRoute(
                callback: refresh,
              )));
    },  
... 
class SettingsRoute extends StatefulWidget {
  final VoidCallback callback;
  SettingsRoute({this.callback});   
...  
 onChanged: (bool value) {
        setState(() {
          DarkMode = !DarkMode;
        });

        widget.callback();
      },  

working demo

full code

import 'package:flutter/material.dart';
import 'package:page_transition/page_transition.dart';
import 'package:share/share.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatefulWidget {
  @override
  _FirstRouteState createState() => _FirstRouteState();
}

class _FirstRouteState extends State<FirstRoute> {
  refresh() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      drawer: Container(
        width: 70,
        child: ClipRRect(
          borderRadius: BorderRadius.vertical(top: Radius.circular(.0)),
          child: Drawer(
            child: Padding(
              padding: const EdgeInsets.fromLTRB(0, 30, 0, 0),
              child: Column(
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.bookmark),
                    onPressed: () {
                      /* Navigator.push(
                            context,
                            PageTransition(
                                type: PageTransitionType.rightToLeft,
                                child: SavedRoute()));*/
                    },
                  ),
                  IconButton(
                    icon: Icon(Icons.rate_review),
                    onPressed: () {
                      /* Navigator.push(
                            context,
                            PageTransition(
                                type: PageTransitionType.rightToLeft,
                                child: ReviewRoute()));*/
                    },
                  ),
                  IconButton(
                    icon: Icon(Icons.share),
                    onPressed: () {
                      Share.share('Share');
                    },
                  ),
                  IconButton(
                    icon: Icon(Icons.settings),
                    onPressed: () {
                      Navigator.push(
                          context,
                          PageTransition(
                              type: PageTransitionType.rightToLeft,
                              child: SettingsRoute(
                                callback: refresh,
                              )));
                    },
                  )
                ],
              ),
            ),
          ),
        ),
      ),
      appBar: AppBar(
        title: Text(
          'Explore',
        ),
        centerTitle: true,
        backgroundColor: Colors.cyan[500],
      ),
      body: Scaffold(
        backgroundColor: DarkMode
            ? Colors.grey[800]
            : Colors
                .white, //Here is the code to change the background color when variable change.
        body: Padding(
          padding: const EdgeInsets.fromLTRB(2, 12, 2, 12),
          child: Center(
            child: ListView(
                shrinkWrap: true,
                padding: EdgeInsets.all(5.0),
                children: <Widget>[
                  Column(
                    children: [
                      Container(
                        padding: EdgeInsets.fromLTRB(2, 10, 2, 0),
                        height: 150,
                        width: double.maxFinite,
                        child: InkWell(
                          onTap: () {
                            /* Navigator.push(
                      context,
                      PageTransition(
                          type: PageTransitionType.rightToLeft,
                          child: SecondRoute()));*/
                          },
                          child: Card(
                            elevation: 5,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(15.0),
                            ),
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(15.0),
                              child: Image.network(
                                'https://i.ytimg.com/vi/hlWiI4xVXKY/maxresdefault.jpg',
                                fit: BoxFit.cover,
                                height: 150.0,
                                width: 100.0,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ]),
          ),
        ),
      ),
    ));
  }
}

class SettingsRoute extends StatefulWidget {
  final VoidCallback callback;
  SettingsRoute({this.callback});
  @override
  _SettingsRouteState createState() => _SettingsRouteState();
}

bool DarkMode = false;

class _SettingsRouteState extends State<SettingsRoute> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: DarkMode ? Colors.grey[800] : Colors.white,
        appBar: AppBar(
          title: Text(
            'Settings',
          ),
          centerTitle: true,
        ),
        body: ListView(
          children: <Widget>[
            Container(
              child: Padding(
                padding: const EdgeInsets.fromLTRB(20, 20, 10, 20),
                child: SwitchListTile(
                  title: Text(
                    'Dark Mode',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.w400,
                      color: DarkMode ? Colors.white : Colors.grey[800],
                    ),
                  ),
                  value: DarkMode,
                  activeColor: Colors.white,
                  inactiveThumbColor: Colors.white,
                  onChanged: (bool value) {
                    setState(() {
                      DarkMode = !DarkMode;
                    });

                    widget.callback();
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

You need to get the value of the DarkMode variable from a global variable like using an app state provider. Or you can send the DarkMode value as a parameter to the next page. The first one is a better use-case.

Your provider will look like this:

import 'package:flutter/material.dart';

class AppStateProvider with ChangeNotifier {

  bool _darkMode = false;

  bool get darkMode => this._darkMode;

  void setDarkMode(bool value) {
    this._darkMode = value;
  }
}

You can read more from here .