当应用栏出现在 Flutter 中时，我无法更改 Android 状态栏颜色

Question

I'd like to change the background color of the status bar and app bar in Android, but I don't know how to do it.

Below is my sample code and screen capture.

Code:

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.black,
      ),
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
        ),
        body: Center(),
      ),
    );
  }
}

Screen Capture:

Update

I try to using SystemChrome.setSystemUIOverlayStyle(); First page can change the background color of the status bar and app bar, but second page does not change the background color of status bar.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      routes: <String, WidgetBuilder>{
        'Page 1': (BuildContext context) => MyHomePage(),
        'Page 2': (BuildContext context) => MyHomePage2(),
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.black,
    ));
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
      ),
      body: Center(
        child: MaterialButton(
          onPressed: () {
            Navigator.pushNamed(context, 'Page 2');
          },
          child: Text('Next Page'),
        ),
      ),
    );
  }
}

class MyHomePage2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.white,
    ));
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.yellow,
      ),
      body: Center(),
    );
  }
}

Screen Recording

Answer 1

This Package can help you

Use this Package

Then import library in main.dart file

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

Now just add this line in under build context FlutterStatusbarcolor.setStatusBarColor(Colors.white);

Answer 2

您可以尝试创建一个全局 Color 变量，当您更改屏幕时，您可以在推送新屏幕之前更新该变量。

Answer 3

I found the solution.

I use AnnotatedRegion<SystemUiOverlayStyle>() to change status bar color of Android and use AppBar() to change status bar color of iOS.

I put another AppBar in body, so I can set other background color for the AppBar .

Like this:

return AnnotatedRegion<SystemUiOverlayStyle>(
  value: SystemUiOverlayStyle(
    statusBarColor: Colors.black,
    statusBarBrightness: Brightness.dark,
    statusBarIconBrightness: Brightness.light,
  ),
  child: Scaffold(
    appBar: Platform.isIOS
        ? AppBar(
            brightness: Brightness.dark,
            elevation: 0.0,
            backgroundColor: Colors.black,
            toolbarHeight: 0.0,
          )
        : null,
    body: SafeArea(
      child: Column(
        children: [
          AppBar(
            title: Text('Page 1'),
            backgroundColor: Colors.green,
          ),
          Center(
           child: MaterialButton(
              onPressed: () {
                Navigator.pushNamed(context, 'Page 2');
              },
              child: Text('Next Page'),
            ),
          ),
        ],
      ),
    ),
  ),
);

Complete code: https://gist.github.com/jack24254029/f3302ecf10045ae6172984495a7a39a4