Flutter How do i change status bar color?

Last updated Aug 12, 2021


In this flutter example we will ocver how to change the status bar color in flutter. When we creates a flutter application appbar and status bat display with default theme color. To change the statusbar color we will use SystemUiOverlayStyle flutter class property.

To change the Status bar color in Android we just need to write below code

 

Download Source code

 

SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.yellow,
        statusBarColor: Colors.green
      //color set to transperent or set your own color
    )
);

 

To change the status bar color for both android and ios use AppBar widget properties

child: AppBar(
    elevation: 0,
    brightness: Brightness.dark,

    //Brightness.light = Dark icon
    //Brghtness.dark = Light icon

    backgroundColor: Colors.red,
    title:Text("Statusbar Color")
  //if you want to set title

)

 

here the brightness: Brightness.dark property will change the status bar icons color. when

Brightness.light = Dark icon
Brghtness.dark = Light icon

 

If we don't want to display Appbar widget we can put Appbar widget inside PreferredSize widget and add preferredSize: Size.zero as 0 so that Appbar will not display but we can change the status bar color and icon theme color.

 

To change the all screens appbar color we will use below code

MaterialApp(
    theme: Theme.of(context).copyWith(
    appBarTheme: Theme.of(context)
        .appBarTheme
        .copyWith(brightness: Brightness.light),
    
)

 

Simple Example code to change the Status bar color in flutter

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(


      ),
      home: Home(),
    );
  }
}
class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    SystemChrome.setSystemUIOverlayStyle(
        SystemUiOverlayStyle(
            systemNavigationBarColor: Colors.yellow,
            statusBarColor: Colors.green
          //color set to transperent or set your own color
        )
    );

    return Scaffold(
      backgroundColor: Colors.blue,
      appBar: PreferredSize(
        preferredSize: Size.zero,
        //set your own hight for appbar.
        child: AppBar(
            elevation: 0,
            brightness: Brightness.dark,

            //Brightness.light = Dark icon
            //Brghtness.dark = Light icon

            backgroundColor: Colors.red,
            title:Text("Statusbar Color")
          //if you want to set title

        ),
      ),

      body: Container(
          alignment: Alignment.center,
          height: MediaQuery.of(context).size.height,
          //making container height equal to verticle hight.
          width:MediaQuery.of(context).size.width,
          //making container width equal to verticle width.
          child:Text("Hello World !", style: TextStyle(
              fontSize: 30,
              color: Colors.white
          ),)
      ),
    );
  }

}

 

How to change the status bar color in flutter

Related

Hide status bar in flutter

Flutter Remove back button from appbar

 

Conclusion: In this flutter example we learned how to change the status bar color in flutter application with differnt ways.

 

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

869 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions