它可以通过两个步骤来实现:

使用FlutterStatusbarcolor包将状态栏颜色设置为与页面背景相匹配 使用AppBar设置状态栏按钮(电池，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()
  }

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

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

使用AnnotatedRegion是最适合我的，特别是如果我没有AppBar

import 'package:flutter/services.dart';

...

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

大多数答案都是使用只适用于安卓系统的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 */,
  );
}

现有的解决方案对我没有帮助，因为我不使用AppBar，而且我不想在用户切换应用程序主题时做出声明。我需要一种反应式的方式来切换亮暗模式，发现AppBar使用了一个名为Semantics的小部件来设置状态栏的颜色。

基本上，我是这样做的:

return Semantics(
  container: false,  // don't make it a new node in the hierarchy
  child: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light,  // or .dark
    child: MyApp(),  // your widget goes here
  ),
);

语义从package:flutter/material.dart导入。 SystemUiOverlayStyle从package:flutter/services.dart导入。

对于那些有iOS和Android颜色不一致的问题的人来说，这个方法对我来说很管用:

import 'dart:io';

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

return AppBar(
      systemOverlayStyle: (Platform.isIOS)
          ? SystemUiOverlayStyle.light
          : const SystemUiOverlayStyle(
            statusBarColor: pbsBlue,
            statusBarIconBrightness: Brightness.light,
            statusBarBrightness: Brightness.light,
          ),
      backgroundColor: Colors.blue,
      title: Text('Home'),
    );

请注意，这是AppBar可重用小部件的摘录。