Status bar presents in every mobile including Android iOS devices. Their main purpose is to display device Battery, Network Tower, Bluetooth, WiFi, Hotspot information show to the user all time when they are activated. In flutter we will change Status bar color with SystemChrome.setSystemUIOverlayStyle() method which provide us many system UI overlay styling options.
Flutter Change Status Bar Color
1. Import material.dart and services.dart package in your project.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
2. Creating SystemChrome.setSystemUIOverlayStyle() method in Widget Build area of our main Root Class. When we apply these setting to the Root it will automatically applied on all the Children screens globally in the whole app.
Note:
- In iOS we cannot set color of Status bar. We can only make Status bar brightness.
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
// Set Status bar color in Android.
statusBarColor: Color.fromARGB(255, 102, 0, 102),
// Set Status Bar Icon Brightness in Android.
statusBarIconBrightness: Brightness.light,
// Set Status Bar Brightness in iOS.
statusBarBrightness: Brightness.light,
));
Screenshot:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
// Set Status bar color in Android.
statusBarColor: Color.fromARGB(255, 102, 0, 102),
// Set Status Bar Icon Brightness in Android.
statusBarIconBrightness: Brightness.light,
// Set Status Bar Brightness in iOS.
statusBarBrightness: Brightness.light,
));
return const MaterialApp(
debugShowCheckedModeBanner: false, home: Scaffold(body: MyApp()));
}
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State {
@override
Widget build(BuildContext context) {
return const Center(
child: Text(
'Status Bar Color Change',
style: TextStyle(fontSize: 28),
));
}
}
Comments
Post a Comment