How to change status bar color in Flutter? How to change status bar color in Flutter? dart dart

How to change status bar color in Flutter?


Update Flutter 2.0 (Recommended):

On latest Flutter version, you should use:

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

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  brightness: Brightness.light, // status bar brightness)


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:Another solution

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


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(...),);