在 Flutter 中仅更改状态栏的颜色答案

【问题标题】：Change only status bar's color in Flutter在 Flutter 中仅更改状态栏的颜色
【发布时间】：2021-07-31 06:30:14
【问题描述】：

我有这样的布局，我想只更改状态栏的颜色，因为我没有使用过 Appbar。

这是我为此使用的代码：

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(children: [
          Container(
              color: Colors.green,
              padding: EdgeInsets.all(15),
              child: TextFormField(
                cursorColor: Colors.green,
                decoration: InputDecoration(
                  contentPadding:
                      EdgeInsets.symmetric(vertical: 0.0, horizontal: 10.0),
                  hintText: 'Search a product',
                  fillColor: Colors.white,
                  filled: true,
                  prefixIcon: Visibility(
                    visible: true,
                    child: Icon(
                      Icons.search,
                      color: Colors.grey.shade900,
                    ),
                  ),
                  enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(6),
                      borderSide: BorderSide(
                          color: Colors.grey.shade200, width: 1.5
                    )
                  ),
                )
              ),
            ),

            //AND OTHER ELEMENTS

        ],),
      ),
    );
  }
}

我想把状态栏的颜色改成深绿色

【问题讨论】：

标签： flutter flutter-layout flutter-appbar

【解决方案1】：

在我们的main.dart 中，我们可以使用SystemChrome 类：

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.green
));

【讨论】：

实际上，我在 Home Widget 的 build 中添加了这个，它起作用了。谢谢

【解决方案2】：

试试这个：

AppBar(
  backwardsCompatibility: false,
  systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.orange),
)

【讨论】：

这会在顶部创建一个我不想要的 Appbar

【解决方案3】：

您可以在您的应用程序栏中直接在 MaterialApp 栏主题中提供它

在 Material 应用全局主题中

MaterialApp(
        
          theme: ThemeData(
            appBarTheme: AppBarTheme(
              brightness: Brightness.dark,

              backwardsCompatibility: false,
              systemOverlayStyle:
                  SystemUiOverlayStyle(statusBarColor: Colors.orange),
)

statusBarColor 是您要更改的 topBar 的颜色。设置backwardsCompatibility: false 很重要，因为它不起作用。

【讨论】：

我只是想改变状态栏的颜色。我不想添加额外的应用栏。您的代码在状态栏下方添加了一个应用栏。谢谢
只在Material上添加appbar主题，就可以在不添加appbar的情况下改变状态栏的颜色。