How to change status bar color in Flutter?

I am trying to change the status bar color to white. I found this pub on flutter. I tried to use the example code on my dart files.

Solution 1:

Update Flutter 2.0 (Recommended):

On latest Flutter version, you should use:

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(
    // Status bar color
    statusBarColor: Colors.red, 

    // Status bar brightness (optional)
    statusBarIconBrightness: Brightness.dark, // For Android (dark icons)
    statusBarBrightness: Brightness.light, // For iOS (dark icons)
  ),
)

Only Android (more flexibility):

import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue, // navigation bar color
    statusBarColor: Colors.pink, // status bar color
  ));
}

Both iOS and Android:

appBar: AppBar(
  backgroundColor: Colors.red, // Status bar color
)

A bit hacky but works on both iOS and Android:

Container(
  color: Colors.red, // Status bar color
  child: SafeArea(
    left: false,
    right: false,
    bottom: false,
    child: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue, // App bar color
      ),
    ),
  ),
) 

Solution 2:

Works totally fine in my app

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return MaterialApp(
      title: app_title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: home_title),
    );
  }
}

(this package)

UPD: Recommended solution (Flutter 2.0 and above)

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

Solution 3:

For those who uses AppBar

If you use AppBar then updating status bar color is as simple as this:

Scaffold(
  appBar: AppBar(
    // Use [Brightness.light] for black status bar 
    // or [Brightness.dark] for white status bar
    // https://stackoverflow.com/a/58132007/1321917
    brightness: Brightness.light 
  ),
  body: ...
)

To apply for all app bars:

return MaterialApp(
  theme: Theme.of(context).copyWith(
    appBarTheme: Theme.of(context)
        .appBarTheme
        .copyWith(brightness: Brightness.light),
  ...
  ),

For those who don't use AppBar

Wrap your content with AnnotatedRegion and set value to SystemUiOverlayStyle.light or SystemUiOverlayStyle.dark:

return AnnotatedRegion<SystemUiOverlayStyle>(
  // Use [SystemUiOverlayStyle.light] for white status bar 
  // or [SystemUiOverlayStyle.dark] for black status bar
  // https://stackoverflow.com/a/58132007/1321917
  value: SystemUiOverlayStyle.light,
  child: Scaffold(...),
);

Solution 4:

Edit for Flutter 2.0.0

The answer below does not work anymore when you have an AppBar on the screen. You now need to configure the AppBarTheme.brightness and AppBarTheme.systemOverlayStyle correctly in that case.

Answer

Instead of the often suggested SystemChrome.setSystemUIOverlayStyle() which is a system wide service and does not reset on a different route, you can use an AnnotatedRegion<SystemUiOverlayStyle> which is a widget and only has effect for the widget that you wrap.

AnnotatedRegion<SystemUiOverlayStyle>(
   value: SystemUiOverlayStyle(
      statusBarColor: Colors.white,
  ),
  child: Scaffold(
      ...
  ),
)