如何以编程方式为整个应用程序更改 Scaffold 小部件的背景颜色答案

【问题标题】：How to change background color of Scaffold widget programatically for whole application如何以编程方式为整个应用程序更改 Scaffold 小部件的背景颜色
【发布时间】：2019-04-12 12:44:17
【问题描述】：

我是 Flutter 应用程序开发的新手，遇到了一个问题。我的应用程序包含大约 5-6 个屏幕，所有屏幕都包含这样的脚手架小部件。

  @override
      Widget build(BuildContext context) {

return Scaffold(
 backgroundColor: const Color(0xFF332F43)
);
}

现在在所有屏幕上我都有相同的概念和设计，所有屏幕都将共享相同的背景颜色。现在我在所有屏幕上都有一个按钮，即更改主题按钮，然后在按钮上单击更改主题按钮 i想要更改所有要更改的屏幕脚手架小部件。现在我该如何实现？请帮我解决我的问题。

【问题讨论】：

标签： dart flutter flutter-layout

【解决方案1】：

Flutter 已经预定义了跨应用程序更改脚手架背景颜色的方法。

只需在 main.dart（主文件）内的 MaterialApp Widget 中更改它即可。

MaterialApp(
      title: 'Flutter',
      theme: ThemeData(
          scaffoldBackgroundColor: const Color(0xFF332F43),
           ),
      );

【讨论】：

【解决方案2】：

Color color = Colors.blue; // make it at root level

void main() {
  runApp(MaterialApp(home: Page1()));
}

在您的 page1 类中，导入上述文件。

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: color,
      appBar: AppBar(title: Text("Page 1")),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (c) => Page2())),
              child: Text("Go to Page 2"),
            ),
            RaisedButton(
              child: Text("Change color"),
              onPressed: () => setState(() => color = Colors.red),
            ),
          ],
        ),
      ),
    );
  }
}

在您的 page2 类中，导入第一个文件。

class Page2 extends StatefulWidget {
  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: color,
      appBar: AppBar(title: Text("Page 2")),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Back"),
            ),
            RaisedButton(
              child: Text("Change color"),
              onPressed: () => setState(() => color = Colors.green),
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：