In this example, I'm going to share you code on how to set the status bar or system navigation bar color in Flutter.
Below is the output of the sample program. You can see that the Status bar and System navigation bar are blue in colour. If you are not changing them they will usually stay in black colour.
In order to achieve this, you need to import services.dart and add the following code to your main function. However, I've shared the complete example below.
import 'package:flutter/services.dart';
And then add the below code to main function.
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.blue, // status bar color
));
That's it. Your status bar and system navigation bar colour will be changed to blue now. You can try changing to other colours like red or yellow to see the impact.
Here is the code from main.dart file.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.blue, // status bar color
));
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: Text('Hello World', textDirection: TextDirection.ltr, style: TextStyle(fontSize: 20.0),),
),
);
}
}
Hope this example is useful to you.
Thanks,Srikanth