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.setSys         


        

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

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 3

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

Simply add this to your build function, or main function.

import 'package:flutter/services.dart';

Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
  ...
}

Answer 6

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