Блог

Я новичок в разработке приложений Flutter и застрял в проблеме.Мое приложение содержит около 5-6 экранов, и все экраны содержат виджет scaffold, подобный этому.

   @override
      Widget build(BuildContext context) {

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

Теперь на всех экранах у меня одинаковая концепция и дизайн, и все экраны будут иметь одинаковый цвет фона.Теперь у меня есть кнопка на всех экранах, т.Е. Кнопка «Изменить тему», и при нажатии кнопки этой кнопки «Изменить тему» я хочу изменить все экраны виджета Scaffold, которые нужно изменить.Теперь, как я могу этого добиться? Пожалуйста, помогите мне в моей проблеме.

У Flutter есть предопределенные способы изменения цвета фона scaffold в приложении.

Просто измените его в виджете MaterialApp внутри вашего main.dart (основного файла).

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

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