In our previous tutorial about this topic we have learn about changing status bar color on App Bar present but sometimes app developer needs to change the Set Status Bar Background Color When App Bar is Not Present in Flutter Android iOS application. This can be possible using SystemChrome.setSystemUIOverlayStyle() function. This function allow us to modify app specific configurations.
Note: iOS devices dose not support changing Status bar background color. But we can change their Icons color to light and dark only.
Contents in this project Set Status Bar Background Color When App Bar is Not Present in Flutter Android iOS App:
1. Import material.dart and services.dart package in your main.dart file.
|
1 2 |
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; |
2. Call our main MyApp class using runApp() function.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp widget class extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create SystemChrome.setSystemUIOverlayStyle() in widget build area in MyApp class.
- statusBarColor : Used to set Status bar background color in Android devices.
- statusBarIconBrightness : Used to set Status bar icons color to light and dark.
- statusBarBrightness : Used to set Status bar icons to white and black in iOS devices.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith( // statusBarColor is used to set Status bar color in Android devices. statusBarColor: Color(0xFFFF6F00), // To make Status bar icons color white in Android devices. statusBarIconBrightness: Brightness.light, // statusBarBrightness is used to set Status bar icon color in iOS. statusBarBrightness: Brightness.light // Here light means dark color Status bar icons. )); return MaterialApp( ); } } |
5. Create a Text widget in Scaffold widget -> Center widget -> Column widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children:[ Text('Set Status Bar Background Color When Appbar is Not Present.', style: TextStyle(fontSize: 22), textAlign: TextAlign.center,) ], ) ) ) ); |
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 36 37 38 39 40 41 |
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.dark.copyWith( // statusBarColor is used to set Status bar color in Android devices. statusBarColor: Color(0xFFFF6F00), // To make Status bar icons color white in Android devices. statusBarIconBrightness: Brightness.light, // statusBarBrightness is used to set Status bar icon color in iOS. statusBarBrightness: Brightness.light // Here light means dark color Status bar icons. )); return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children:[ Text('Set Status Bar Background Color When Appbar is Not Present.', style: TextStyle(fontSize: 22), textAlign: TextAlign.center,) ], ) ) ) ); } } |
Screenshot in Android device:
