I can't change Android status bar color when app bar present in flutter

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

check this thread: https://stackoverflow.com/questions/52489458/how-to-change-status-bar-color-in-flutter#:~:text=The%20text%20color%20of%20the,SystemChrome. — krumpli, Sep 25 '20 at 10:39
This can work at one page. If I have two pages and these pages have different background color of the status bar and app bar is not work. — Shun Min Chang, Sep 25 '20 at 11:06

score 0 · Answer 1 · answered Sep 25 '20 at 10:43

0

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

answered Sep 25 '20 at 10:43

Faizan Ahmad

62
1
5

Thank you for reply. But this plugin has been archived. Maybe I can see this plugin how to do this. – Shun Min Chang Sep 25 '20 at 10:54
This package updated long time age but this is working perfectly – Faizan Ahmad Sep 25 '20 at 17:59

score 0 · Answer 2 · answered Sep 25 '20 at 15:26

0

You can try and create a global Color variable and when you change screen you update the var before pushing the new screen.

answered Sep 25 '20 at 15:26

nickypangers

116
6

Thank you for reply. I tried it and still can't change the background color of status bar. – Shun Min Chang Sep 26 '20 at 02:21

Shun Min Chang · Accepted Answer · 2020-10-25T05:12:59.517

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

I can't change Android status bar color when app bar present in flutter

3 Answers3