Hello Guys How are you all? Hope you all are fine. Many times we need to change our StatusBar color according to our design. So In this tutorial, we are going to learn How to Change StatusBar Color in Flutter?
How to Change StatusBar Color in Flutter?
- How to Change StatusBar Color in Flutter?
to Change StatusBar Color in Flutter After this, you need to add the following lines better place to put these lines is in your main() method. If you use AppBar then updating the status bar color is as simple as this.
- Change StatusBar Color in Flutter
to Change StatusBar Color in Flutter After this, you need to add the following lines better place to put these lines is in your main() method. If you use AppBar then updating the status bar color is as simple as this.
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
));
}Both iOS and Android
appBar: AppBar(
backgroundColor: Colors.red, // status bar color
brightness: Brightness.light, // status bar brightness
)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 Brightness.light for dark status bar
// or Brightness.dark for light status bar
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 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 */
)),
),
);So, It’s All About How to Change StatusBar Color in Flutter?. I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.
Leave a Reply