Different ways to change the status bar and navigation bar color (iOS and Android) in Flutter
Flutter has been popular since it’s release and many developers and clients are fans of how flutter works. One code-base for iOS and android, hot restart features which makes flutter easy to work with development, performance like native apps are few of the flutters feature.
And another thing Flutter is popular at is the easiness at starting. Completely new with no previous knowledge in mobile development with basic OOP( Object-oriented Programming) concept can start developing in flutter and make their dream app come to life.
But few things can be overwhelming for beginners due to the verboseness of flutter. So today we are looking at the simple yet very much asked question in flutter community, i.e. How to change the color of the status bar and navigation bar in a flutter.
1. Using AppBar (Both iOS and Android)
Here, in brightness parameter, Brightness.light makes the status bar icons dark while Brightness.dart makes the status bar icon white.
2. Using AnnotatedRegion Widget (Both iOS and Android)
When You are not using AppBar you can use AnnotatedRegion to change the color of status bar, but if you have AppBar this method doesn’t work (Both iOS and Android)
3. Using Package (flutter_statusbarcolor)
Another way to approach in changing the color, and if you are okay with using package, flutter_statusbarcolor is a good way to do it.
Simply add this package to your pubspec.yaml file, import it and use it wherever you want.
4. Using SystemChrome
With this method you can change navigation bar color, status bar color, status bar brightness, status bar icon brightness any many more customization option.
I personally use number 4 since it’s easy to implement, but you can play around with other methods and find the best option for you.