How to change Status Bar Color and System Navigation Bar Color in Flutter(Android)

Swaroop Sambhayya
2 min readSep 12, 2020

Hello guys, Finding difficulty in changing the Status bar color or System navigation bar color? here’s a better way to do it lets code along :-)

Assuming that you are in Home screen or Main screen,lets import flutter services package.

import 'package:flutter/services.dart';

Make AnnotatedRegion class/widget as the parent of your Home Screen.

class HomeScreenExtends StatelessWidget{
@override
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>(

child:Scaffold(
appBar: AppBar(
backgroudColor:Colors.blue,
title:Text('Demo'),
), ) ); }}

Add value property to AnnotatedRegion Class, inside the property we wall pass SystemUIOverlayStyle widget which is our game changer, we will add our color to statusBarColor and systemNavigationBarColor properties. Also, we can change the status bar icon color.

class HomeScreen Extends StatelessWidget{
@override
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>(
value:SystemUiOverlayStyle(
statusBarColor: Colors.transparent, //i like transaparent :-) systemNavigationBarColor: Colors.white, // navigation bar color statusBarIconBrightness: Brightness.dark, // status bar icons' color systemNavigationBarIconBrightness:Brightness.dark, //navigation bar icons' color),child:Scaffold(
appBar: AppBar(

backgroundColor:Colors.blue,
title:"Demo"
), ), );}}

Note: If changes are not reflecting after hot reload/restart please stop and re-run the app to see the changes. If the issue still persists then remove the appBar option in Scaffold(if declared) and then reload/restart. Add appBar again then hot reload to see changes.

I hope this will help you guys! , Thank you :-).

--

--