How to change the status bar Color in Flutter?
Dec 30, 2022
To change the text color of the status bar in a Flutter app on iOS, you can use the SystemChrome
class and set the statusBarColor
and statusBarBrightness
properties.
Here’s an example of how you can do this:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Set the status bar text color to white (brightness: Brightness.light)
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarBrightness: Brightness.light,
statusBarIconBrightness: Brightness.light,
));
return MaterialApp(
// ...
);
}
}
This will set the status bar text color to white (Brightness.light) and set the status bar color to transparent.
Note that this will only work on iOS. To set the status bar text color on Android, you can use the SystemChrome.setSystemUIOverlayStyle
method in a similar way.