Status bar has by default gray background color. But sometimes app developer need to change the background color of Status bar. We can set status bar background color using SystemChrome.setSystemUIOverlayStyle() method. The system chrome package is used to set specific aspect of android and iOS mobile operating system. The system chrome has its own parameter known as statusBarColor which is used to Set Change Status Bar Background Color in Flutter Android iOS App Example Tutorial.
Contents in this project Set Change Status Bar Background Color in Flutter Android iOS Example:
1. Import material.dart and services.dart package in your app’s main.dart file.
|
1 2 |
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget.
|
1 2 3 |
class MyApp extends StatelessWidget { } |
4. Create Widget build area in MyApp class and just before starting Material App we have to define System Chrome and call the statusBarColor. We are using Hex color code here to set status bar background color. You can also user here color in any format.
Here 0xff + HEX COLOR CODE
- statusBarColor : Used to set background color of Status bar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( statusBarColor: Color(0xFF2E7D32), )); return MaterialApp( ); } } |
5. Creating Scaffold widget and make a Text widget in Center widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( statusBarColor: Color(0xFF2E7D32), )); return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Set Status Bar Background Color'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children:[ Text('Set Status Bar Background Color', style: TextStyle(fontSize: 26),) ], ) ) ) ); } } |
6. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( statusBarColor: Color(0xFF2E7D32), )); return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Set Status Bar Background Color'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children:[ Text('Set Status Bar Background Color', style: TextStyle(fontSize: 26),) ], ) ) ) ); } } |
Screenshot:
How to change different status bar color for every screen and back to previous screen with its own status color?
Dipak you can use the same method in each screen class, Maybe it will work. If it won’t the I’ll find another solution for you 🙂 .