How to change the status bar Color in Flutter?

Arslan Raza
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.

--

--

Arslan Raza
Arslan Raza

Written by Arslan Raza

Mobile Applicaiton Developer

No responses yet