我是flutter应用程序开发的新手,被困在一个问题中。我的应用程序包含大约5-6个屏幕,所有屏幕都包含这样的脚手架小部件。
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF332F43)
);
}
现在在所有屏幕上我都具有相同的概念和设计,并且所有屏幕都将共享相同的背景色。现在我在所有屏幕上都有一个按钮,即“更改主题”按钮,并在该按钮上单击该“更改主题”按钮i想要更改所有要更改的屏幕脚手架小部件。现在我该如何实现?请帮助我解决我的问题。
答案 0 :(得分: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),
),
],
),
),
);
}
}
答案 1 :(得分:1)
Flutter具有预定义的方法来更改应用程序中支架的背景颜色。
只需在main.dart(主文件)内部的 MaterialApp窗口小部件中进行更改。
MaterialApp(
title: 'Flutter',
theme: ThemeData(
scaffoldBackgroundColor: const Color(0xFF332F43),
),
);