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


当前回答

最新的解决方案。Flutter 2.0及以上

对于使用AppBar的用户:

/// WORKS on the screen where appBar is used
Scaffold(
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle(
          // statusBarColor: Colors.red, // You can use this as well
          statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
          statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
        ),
      ),
     ), 

对于那些不使用AppBar的人:

将下面的代码放在根屏幕的构建功能上,以影响下面的所有屏幕:

void main() {
  runApp(MyApp());
}

// This widget is the root of your application.
class MyApp extends StatelessWidget {

  /// WORKS on every screen EXCEPT the screen in which appBar is used
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      // statusBarColor: Colors.red, // You can use this as well
      statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
      statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
    ),
  );
  @override
  Widget build(BuildContext context) {}
}

将下面的代码放在单个屏幕的构建功能上,只影响该屏幕:

class SingleScreen extends StatelessWidget {

  /// WORKS on a single screen where appBar is NOT used
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      // statusBarColor: Colors.red, // You can use this as well
      statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
      statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
    ),
  );
  @override
  Widget build(BuildContext context) {}
}

其他回答

你可以改变它没有appbar给脚手架(backgroundColor: color);如果你把身体包裹起来,问题可能就解决了。我的意思是这个解决方案不是实践,但如果你不使用appbar,你可以用这种方式实现。

我不能直接在帖子中评论,因为我还没有必要的声誉,但作者问了以下问题:

唯一的问题是背景是白色的,但时钟,无线和其他文本和图标也是白色的。我不知道为什么!!

对于任何来到这个帖子的人来说,这是对我有用的方法。状态栏的文本颜色由flutter/material.dart中的亮度常数决定。要改变这一点,调整SystemChrome解决方案,如下所示来配置文本:

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.red,
      statusBarBrightness: Brightness.dark,
    ));

亮度的可能值为亮度。黑暗和光明。

文档: https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html

在我的应用程序中完全正常

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return MaterialApp(
      title: app_title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: home_title),
    );
  }
}

(包)

乌利希期刊指南: 推荐解决方案(Flutter 2.0及以上)

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

如果你想改变整个应用程序的状态颜色,你可以像这样使用primaryColorDark属性:

void main() {
  runApp(
    MaterialApp(
      home: HomeWidget(),
      theme: ThemeData(
        primaryColorDark: Colors.white,
      ),
    ),
  );
}

[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());
}