[FIXED] Flutter – How to set status bar color when AppBar not present

Issue

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:

enter image description here

Solution

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

Answered By – Hannes Tiltmann

Answer Checked By – Katrina (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published