#dart #flutter #flutter-layout
#dart #флаттер #flutter-макет
Вопрос:
Я новичок в разработке приложений Flutter и застрял в проблеме.Мое приложение содержит около 5-6 экранов, и все экраны содержат виджет scaffold, подобный этому.
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF332F43)
);
}
Теперь на всех экранах у меня одинаковая концепция и дизайн, и все экраны будут иметь одинаковый цвет фона.Теперь у меня есть кнопка на всех экранах, т.Е. Кнопка «Изменить тему», и при нажатии кнопки этой кнопки «Изменить тему» я хочу изменить все экраны виджета Scaffold, которые нужно изменить.Теперь, как я могу этого добиться? Пожалуйста, помогите мне в моей проблеме.
Ответ №1:
У Flutter есть предопределенные способы изменения цвета фона scaffold в приложении.
Просто измените его в виджете MaterialApp внутри вашего main.dart (основного файла).
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),
),
],
),
),
);
}
}