How to Change StatusBar Color in Flutter?
When users create a Flutter Application the user will get the default Color for StatusBar in Flutter. Today we will be discussing How to Change StatusBar Color in Flutter.
How to Change StatusBar Color in Flutter?
Only Android
import 'package:flutter/services.dart';
After this, you need to add the following lines better place to put these lines is in your main() method.
void main() { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( systemNavigationBarColor: Colors.blue, // navigation bar color statusBarColor: Colors.pink, // status bar color )); }
For those who use the AppBar Widget.
If you use AppBar then updating the status bar color is as simple as this.
Scaffold( appBar: AppBar( // Use SystemUiOverlayStyle.dark for dark status bar // or SystemUiOverlayStyle.light for light status bar ), body: ... )
Both iOS and Android:
appBar: AppBar( backgroundColor: Colors.red, // status bar color systemOverlayStyle: SystemUiOverlayStyle.light, // status bar brightness ),
To apply for all app bars:
return MaterialApp( theme: Theme.of(context).copyWith( appBarTheme: Theme.of(context) .appBarTheme .copyWith(backgroundColor: Colors.red), );
For those who don’t use AppBar
Wrap your content with AnnotatedRegion and set statusBarIconBrightness for Android and statusBarBrightness for iOS.
return AnnotatedRegion<SystemUiOverlayStyle>( value: const SystemUiOverlayStyle( // For Android. // Use [light] for white status bar and [dark] for black status bar. statusBarIconBrightness: Brightness.light, // For iOS. // Use [dark] for white status bar and [light] for black status bar. statusBarBrightness: Brightness.dark, ), child: Scaffold(...), );
To change the status bar color in iOS when you are using SafeArea
Scaffold( body: Container( color: Colors.red, /* Set your status bar color here */ child: SafeArea(child: Container( /* Add your Widget here */ )), ), );
Output
Conclusion:
In this article, we have learned about How to Change StatusBar Color in Flutter.
Thanks for Reading!!!
Keep Fluttering.
Do let us know if you need any assistance with Flutter Development?
FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.
ready to get started?
Fill out the form below and we will be in touch soon!
"*" indicates required fields