我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。


当前回答

[Android测试] 这就是为什么我能够使状态栏透明,文本颜色深,

import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
    statusBarIconBrightness: Brightness.dark // dark text for status bar
  ));
  runApp(MyApp());
}

其他回答

这(在脚手架内部)创建了一个带有浅色内容的黑色状态栏。(没有Appbar)

appBar: AppBar(
      toolbarHeight: 0,
      backgroundColor: Colors.black,
      systemOverlayStyle: SystemUiOverlayStyle.light,
    ),

以下是你需要知道的一切:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.amber, // navigation bar color
    statusBarColor: Colors.white, // status bar color
    statusBarIconBrightness: Brightness.dark, // status bar icon color
    systemNavigationBarIconBrightness: Brightness.dark, // color of navigation controls
  ));
  runApp(MyApp());
}

没有一个答案似乎提到,你可以在你的主MaterialApp小部件ThemeData函数。

return MaterialApp(
  theme: ThemeData(
    appBarTheme: const AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: Colors.white,
      ),
    ),
  ),
),

这也可以在darkTheme ThemeData中完成。

你也可以在SliverAppBar中使用这个,不要忘记使用backwardsCompatibility: false如果你跳过这个属性,它将不起作用。参见doc

@override
  Widget build(BuildContext context) {    
    return Scaffold(
      appBar: null,
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
              systemOverlayStyle: SystemUiOverlayStyle(
                  statusBarColor: Colors.transparent,
                  statusBarIconBrightness: Brightness.dark),
              backwardsCompatibility: false,
//... remaining code and close braces..

当您不使用AppBar时,更改状态栏的颜色

首先导入这个

import 'package:flutter/services.dart';

现在使用下面的代码改变状态栏的颜色在你的应用程序,当你不使用AppBar

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(

    statusBarColor: AppColors.statusBarColor,/* set Status bar color in Android devices. */
    
    statusBarIconBrightness: Brightness.dark,/* set Status bar icons color in Android devices.*/
    
    statusBarBrightness: Brightness.dark)/* set Status bar icon color in iOS. */
); 

在iOS中使用安全区域时,更改状态栏的颜色

Scaffold(
  body: Container(
    color: Colors.red, /* Set your status bar color here */
    child: SafeArea(child: Container(
      /* Add your Widget here */
    )),
  ),
);