如何更改 Flutter WEB 中的“状态栏”颜色？ （保存为书签后）
Posted
技术标签:
【中文标题】如何更改 Flutter WEB 中的“状态栏”颜色？ （保存为书签后）【英文标题】：How to change 'Status Bar' colour in Flutter WEB? (After saving as a bookmark) 【发布时间】：2021-08-25 22:52:12 【问题描述】：我可以将我的 Flutter Web 应用程序保存在主屏幕上作为书签图标。当我打开它时，状态栏的颜色是黑色的，看起来很奇怪，不像是“类似应用程序”。
如何为状态栏赋予与脚手架相同的颜色？
我现有的代码如下：
...
@override
Widget build(BuildContext context)
return ChangeNotifierProvider<CP>(
create: (BuildContext content) => CP(),
child: MaterialApp(
title: 'App title',
debugShowCheckedModeBanner: false,
theme: ThemeData(
canvasColor: Colors.transparent,
primarySwatch: white,
//primaryColor: Colors.white
),
routes:
...
,
home: MainBody()),
);
class MainBody extends StatefulWidget
@override
_MainBodyState createState() => _MainBodyState();
class _MainBodyState extends State<MainBody>
@override
Widget build(BuildContext context)
return Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
stops: [0.1, 1],
end: Alignment.bottomCenter,
begin: Alignment.topCenter,
colors: [
Provider.of<CP>(context).primary,
Provider.of<CP>(context).secondary,
],
), //Provider.of<CP>(context).fMainPageGradient
),
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
....
【问题讨论】：
【参考方案1】：只需将 index.html 中的这一行添加到 <head> 标记中，并将“#000000”替换为您喜欢的颜色即可。
<meta name="theme-color" content="#000000">
【讨论】：
【参考方案2】：你可以用这个改变状态栏的颜色
@override
void initState()
updateStatusBar();
super.initState();
void updateStatusBar()
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.amber),
);
【讨论】：
感谢@Jaime，但这不适用于颤振网络。我查过了。以上是关于如何更改 Flutter WEB 中的“状态栏”颜色？ （保存为书签后）的主要内容，如果未能解决你的问题，请参考以下文章