如何更改 Flutter WEB 中的“状态栏”颜色？ （保存为书签后）

问题描述 投票：0回答：3

我可以将我的 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>[
                  ....

flutter flutter-layout flutter-web
3个回答
3
投票

只需将index.html中的这一行添加到

<head>
标签中，并将“#000000”替换为您喜欢的颜色即可。

<meta name="theme-color" content="#000000">
0
投票

将此元标记放在index.html文件中的“head”标记之间。

<meta name="theme-color" content="#393557">

它将更改您的移动浏览器的顶部菜单颜色。

-2
投票

您可以用它更改状态栏颜色

  @override
  void initState() {
    updateStatusBar();
    super.initState();
  }

  void updateStatusBar() {
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(statusBarColor: Colors.amber),
    );
  }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.