如何在Flutter中更改“状态栏”颜色?(保存为书签后)

wfveoks0  于 2023-05-01  发布在  Flutter
关注(0)|答案(2)|浏览(108)

我可以在主屏幕上将我的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>[
                  ....

soat7uwm

soat7uwm1#

只要在索引中加上这一行。html添加到<head>标签,并将“#000000”替换为您喜欢的颜色。

<meta name="theme-color" content="#000000">
rqdpfwrv

rqdpfwrv2#

您可以使用此选项更改状态栏的颜色

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

  void updateStatusBar() {
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(statusBarColor: Colors.amber),
    );
  }

相关问题