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