如何在Flutter中更改状态栏颜色？

Question

我正在尝试将状态栏颜色更改为白色...我发现这个酒吧在flutter https://pub.dartlang.org/packages/flutter_statusbarcolor ...我试图在我的dart文件(主要和其他)上使用示例代码...但是它不起作用......任何想法的家伙？

Answer 1

针对 Flutter 2.0.0 进行编辑

当您AppBar在屏幕上显示时，下面的答案不再起作用。在这种情况下，您现在需要正确配置AppBarTheme.brightness和AppBarTheme.systemOverlayStyle。

回答

代替经常建议SystemChrome.setSystemUIOverlayStyle()的系统范围的服务并且不会在不同的路线上重置，您可以使用AnnotatedRegion<SystemUiOverlayStyle>which 是一个小部件，并且只对您包装的小部件有效。

AnnotatedRegion<SystemUiOverlayStyle>(
   value: SystemUiOverlayStyle(
      statusBarColor: Colors.white,
  ),
  child: Scaffold(
      ...
  ),
)

Answer 2

在我的应用程序中工作正常

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),
    );
  }
}

UPD： 另一种解决方案

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

Answer 3

仅Android（更具灵活性）：

import 'package:flutter/services.dart';

之后，您需要添加以下几行（在您的main()方法中放置这些行的更好位置）

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue, // navigation bar color
    statusBarColor: Colors.pink, // status bar color
  ));
}

iOS和Android：

appBar: AppBar(
  backgroundColor: Colors.red, // status bar color
  brightness: Brightness.light, // status bar brightness
)

Answer 4

这对我有用：

进口服务

import 'package:flutter/services.dart';

然后加：

@override
  Widget build(BuildContext context) {

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.white,
      statusBarBrightness: Brightness.dark,
    ));
    return MaterialApp(home: Scaffold(

Answer 5

不使用时更改状态栏颜色 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使用时更改状态栏颜色SafeArea

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

Answer 6

我认为这会帮助你：

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white, // navigation bar color
        statusBarColor: Colors.white, // status bar color
        statusBarIconBrightness: Brightness.dark, // status bar icons' color
        systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
    ));

Answer 7

I can't comment directly in the thread since I don't have the requisite reputation yet, but the author asked the following:

the only issue is that the background is white but the clock, wireless and other text and icons are also in white .. I am not sure why!!

For anyone else who comes to this thread, here's what worked for me. The text color of the status bar is decided by the Brightness constant in flutter/material.dart. To change this, adjust the SystemChrome solution like so to configure the text:

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

Your possible values for Brightness are Brightness.dark and Brightness.light.

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

Answer 8

使用 AnnotatedRegion 对我来说最有效，特别是如果我没有 AppBar

import 'package:flutter/services.dart';

...

Widget build(BuildContext context) {
   return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
         value: SystemUiOverlayStyle.light,                
         child: ...,
      ),
   );
}

Answer 9

这是您需要知道的一切：

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

Answer 10

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

Answer 11

从颤振2.5.0开始

brightnessAppBar 中已弃用该属性

我们需要使用，systemOverlayStyle财产

例如，如果您使用的是 AppBar

AppBar(
      title: Text("Title"),
      systemOverlayStyle: SystemUiOverlayStyle.dark) //for dark color

Answer 12

对于那些使用 AppBar

如果使用，AppBar则更新状态栏颜色就是这样简单：

Scaffold(
  resizeToAvoidBottomInset: false,
  appBar: AppBar(
    // Use Brightness.light for dark status bar 
    // or Brightness.dark for light status bar
    brightness: Brightness.light 
  ),
  body: ...
)

Answer 13

这个也可以工作

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

Answer 14

它可以通过 2 个步骤来实现：

1. 使用FlutterStatusbarcolor 包设置状态栏颜色以匹配您的页面背景
2. 使用AppBar.brightness属性设置状态栏按钮（电池、wifi 等）的颜色

如果您有AppBar：

  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        // Other AppBar properties
      ),
      body: Container()
    );
  }

如果您不想在页面中显示应用栏：

  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        elevation: 0.0,
        toolbarHeight: 0.0, // Hide the AppBar
      ),
      body: Container()
  }

Answer 15

什么对我有用（对于那些不使用 AppBar 的人）

添加具有首选颜色的 AppbBar，然后设置：toolbarHeight: 0

 child: Scaffold(
    appBar: AppBar(
      toolbarHeight: 0,
      backgroundColor: Colors.blue,
      brightness: Brightness.light,
    )