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


当前回答

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

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

对于任何来到这个帖子的人来说,这是对我有用的方法。状态栏的文本颜色由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

其他回答

当您不使用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 */
    )),
  ),
); 

大多数答案都是使用只适用于安卓系统的SystemChrome。我的解决方案是将AnnotatedRegion和SafeArea合并到新的小部件中,这样它也可以在iOS中工作。我可以在没有AppBar的情况下使用它。

class ColoredStatusBar extends StatelessWidget {
  const ColoredStatusBar({
    Key key,
    this.color,
    this.child,
    this.brightness = Brightness.dark,
  }) : super(key: key);

  final Color color;
  final Widget child;
  final Brightness brightness;

  @override
  Widget build(BuildContext context) {
    final defaultColor = Colors.blue;
    final androidIconBrightness =
        brightness == Brightness.dark ? Brightness.light : Brightness.dark;
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: color ?? defaultColor,
        statusBarIconBrightness: androidIconBrightness,
        statusBarBrightness: brightness,
      ),
      child: Container(
        color: color ?? defaultColor,
        child: SafeArea(
          bottom: false,
          child: Container(
            child: child,
          ),
        ),
      ),
    );
  }
}

用法:把它放在页面小部件的顶部。

@override
Widget build(BuildContext context) {
  return ColoredStatusBar(
    child: /* your child here */,
  );
}

最新的解决方案。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) {}
}

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

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

对于任何来到这个帖子的人来说,这是对我有用的方法。状态栏的文本颜色由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

你可以这样做,

SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        statusBarColor: Colors.grey.withOpacity(0.5),
        statusBarIconBrightness: Brightness.dark,
        statusBarBrightness:
            Platform.isAndroid ? Brightness.dark : Brightness.light,
        systemNavigationBarColor: Colors.white,
        systemNavigationBarDividerColor: Colors.grey,
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
    );

将此代码添加到主程序中。省道构建方法,