Flutter - How to set status bar color when AppBar not present

Question

How to set status bar color when AppBar not present.

I have tried this but not working.

Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return new Scaffold(
        body: new Container(
        color: UniQueryColors.colorBackground,
        child: new ListView.builder(
           itemCount: 7,
           itemBuilder: (BuildContext context, int index){
             if (index == 0){
               return addTopInfoSection();
             }
           },
        ),
       ),
    );
}

Output look like this:

Answer 1

First, import services package:

import 'package:flutter/services.dart';

Next, simply put this in the build function of your App:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.blue, //or set color with: Color(0xFF0000FF)
));

Additionally, you can set useful properties like: statusBarIconBrightness, systemNavigationBarColor or systemNavigationBarDividerColor

---

If you prefer a more flutter/widget way of doing the same thing, consider using the AnnotatedRegion<SystemUiOverlayStyle> widget.

The value: property can be set to a SystemUiOverlayStyle() object containing the same properties as shown above.

---

For more infos, head over to the API Docs

Answer 2

If you take a look at the source code of AppBar, you can see they use an AnnotatedRegion widget. AnnotedRegion widget gives you more control on System overlay style. This is a more fluttery way to configure the system styles when an app bar is not used.

From my understanding, this widget automatically sets the statusbar/navigationbar color when the widget wrapped in it gets overlaid by the statusbar/navigationbar.

You can wrap your widget like this:

import 'package:flutter/services.dart';

...    

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

For more information about AnnotatedRegion widget head over to the API Docs

Answer 3

As the solution is already mentioned, I am implementing it in a different approach. The approach followed is removing AppBar and changing the color of the status bar using Container widget.

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Test',
      home: Scaffold(
        primary: true,
        appBar: EmptyAppBar(),
        body: MyScaffold(),
      ),
    ),
  );
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        'Test',
      ),
    );
  }
}

class EmptyAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
    );
  }

  @override
  Size get preferredSize => Size(0.0, 0.0);
}

• Here I am using EmptyAppBar class for removing the AppBar which is by default present in Scaffold
• In EmptyAppBar class we can choose the required color in the container widget.
• After that, you have your own custom MyScaffold class for creating your widgets. In my code, I've created a text.

Reference: GitHub Issue

Answer 4

On Android, add the following to onCreate in MainActivity.java, after the call to super.onCreate(savedInstanceState);

getWindow().setStatusBarColor(0x00000000);

or you can use the the flutter_statusbarcolor plugin

   changeStatusColor(Color color) async {
    try {
      await FlutterStatusbarcolor.setStatusBarColor(color);
    } on PlatformException catch (e) {
      print(e);
    }
  }

Sample project

Answer 5

While searching for SystemChrome I found this: https://docs.flutter.io/flutter/services/SystemChrome/setSystemUIOverlayStyle.html

Right above the sample code is a paragraph about AppBar.brightness.

You should should be able to add an AppBar like this:

Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return new Scaffold(
        appBar: new AppBar(
            title: new Text('Nice title!'),
            brightness: Brightness.light,
        ),
        body: new Container(
        color: UniQueryColors.colorBackground,
        child: new ListView.builder(
           itemCount: 7,
           itemBuilder: (BuildContext context, int index){
             if (index == 0){
               return addTopInfoSection();
             }
           },
        ),
       ),
    );
}

Heres info about the Brightness

Answer 6

you should solve this question in two ways:

1. you did not set appBar then you just write in this way:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
  statusBarColor: Colors.black, 
));

or

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
  statusBarColor: Colors.white, 
));

2. you always set appBar so you should set appBar but not upon code:

Scaffold(
  appBar: AppBar(
    brightness: Brightness.light,
  )
)

or

Scaffold(
  appBar: AppBar(
    brightness: Brightness.dark,
  )
)

Answer 7

I tried many methods but they didn’t work. And i found another method, use safeArea ,AnnotatedRegion and Scaffold

AnnotatedRegion(
  // status icon and text color, dark:black  light:white
  value: SystemUiOverlayStyle.dark,
  child: Scaffold(
     // statusbar color
     backgroundColor: Colors.white,
     body : SafeArea(****)
  )
}

The code implements the white status bar and black text

Answer 8

The status bar colour is rendered by the Android system. Whether that can be set from Flutter or not is up for debate: How to make Android status bar light in Flutter

What you can do however, is change the status bar colour in the Android specific code by editing the theme: How to change the status bar color in android

For iOS you'll have to see their documentation - I'm not familiar with the platform.

There are in fact two Dart libraries, one for setting the light/dark theme of the statusbar and the other for setting the colour. I haven't used either, but clearly someone else has had the same issue you're facing and ended up developing their own package.

Answer 9

If you dont want to use app bar, then

appBar: AppBar(
      elevation: 0,
      backgroundColor: Colors.white, # status bar color
      toolbarHeight: 0,
      brightness: Brightness.light # or Brightness.dark

Answer 10

Widget build(BuildContext context) {

    return new Scaffold(
        body: new Container(
            color: UniQueryColors.colorBackground,

    /* Wrapping ListView.builder with MediaQuery.removePadding() removes the default padding of the ListView.builder() and the status bar takes the color of the app background */

        child: MediaQuery.removePadding(
         removeTop: true,
         context: context,
        child: ListView.builder(
           itemCount: 7,
           itemBuilder: (BuildContext context, int index){
             if (index == 0){
               return addTopInfoSection();
             }
           },
        ),
       ),
      ),
    );
}

Answer 11

Use

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.orange),
)

or

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

Answer 12

Use EmptyAppBar, with some code for restoring color as in AppBar.

class EmptyAppBar  extends StatelessWidget implements PreferredSizeWidget {
  static const double _defaultElevation = 4.0;
  @override
  Widget build(BuildContext context) {
    final ThemeData themeData = Theme.of(context);
    final AppBarTheme appBarTheme = AppBarTheme.of(context);
    final Brightness brightness = appBarTheme.brightness
        ?? themeData.primaryColorBrightness;
    final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark
        ? SystemUiOverlayStyle.light
        : SystemUiOverlayStyle.dark;

    return Semantics(
      container: true,
      child: AnnotatedRegion<SystemUiOverlayStyle>(
        value: overlayStyle,
        child: Material(
          color: appBarTheme.color
              ?? themeData.primaryColor,
          elevation: appBarTheme.elevation
              ?? _defaultElevation,
          child: Semantics(
            explicitChildNodes: true,
            child: Container(),
          ),
        ),
      ),
    );
  }
  @override
  Size get preferredSize => Size(0.0,0.0);
}

Answer 13

Use the following in your main function to change the status bar color for all the views/screens. This will work even without an app bar.

WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
  statusBarIconBrightness: Brightness.dark, // this will change the brightness of the icons
  statusBarColor: Colors.white, // or any color you want
));

Answer 14

this best status bar like default material design theme without AppBar()

 Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Theme.of(context).accentColor)