How to Change the Color of the Status Bar in Flutter Application?
Flutter is an open-source UI toolkit developed and maintained by Google. It is used by big companies like Airbnb, Alibaba, and Google itself to serve billions of users around the globe. Status Bar is the topmost area of the screen which is home to the Battery Indicator, Network Status, Time, Notification Icons, etc. In this article, we will see how to change the color of the status bar in our application.
Approach
To change the color of the status bar, we will use SystemChrome.setSystemUIOverlayStyle() Method inside the main function of our application.
Syntax
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle( statusBarColor: Colors.green, ));
Implementation
The below example shows the use of the SystemChrome.setSystemUIOverlayStyle() method to change the color of the status bar in our flutter application.
Dart
import 'package:flutter/material.dart' ; import 'package:flutter/services.dart' ; void main() { // Set the status bar color to blue SystemChrome.setSystemUIOverlayStyle( const SystemUiOverlayStyle( statusBarColor: Colors.green, )); runApp( const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'GFG - Flutter Status Bar Color' , home: Scaffold( appBar: AppBar( title: const Text( 'GFG - Flutter Status Bar Color' ), ), body: const Center( child: Text( 'Welcome to w3wiki' ), ), ), ); } } |
Output: