To change the color of the status bar in Flutter, you can use the SystemChrome
class from the flutter:flutter
package. You can use the setSystemUIOverlayStyle
method to set the style of the status bar. This method takes a SystemUiOverlayStyle
object as an argument, which has properties for the status bar color, icon brightness, and so on.
Here’s an example of how you can change the status bar color to a light blue color:
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.lightBlue,
statusBarBrightness: Brightness.light,
));
runApp(MyApp());
}
Note that this will change the status bar color for the entire app. If you want to change the status bar color only for a specific screen or route, you can wrap the widget tree for that screen or route in a AnnotatedRegion
widget, and set the SystemUiOverlayStyle
value in the value
property.
Here’s an example of how to change the status bar color only for a specific screen:
import 'package:flutter/services.dart';
class MyScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.lightBlue,
statusBarBrightness: Brightness.light,
),
child: Scaffold(
// your screen content
),
);
}
}