How to make Status Bar transparent and icon light/dark on Flutter

For the interactive App user interface, sometimes we need to make the status bar transparent. But whenever you make it transparent, its icon is not going to change color itself. You need to do simple coding which I have mentioned below.

To make the Status Bar background color transparent, Insert it into the widget builder.

SystemChrome.setSystemUIOverlayStyle(
   SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      //color set to transperent or set your own color
      statusBarIconBrightness: Brightness.dark, 
      //set brightness for icons, like dark background light icons
   )
);

Use brightness property of  AppBar to change the color of the Status bar Icon.

AppBar( 
   brightness: Brightness.dark,
   //Brightness.light = Dark icon
   //Brghtness.dark = Light icon
)

Set App bar like below if you want Statusbar color light/dark without AppBar.

appBar: PreferredSize( //alternative way to make statusbar icon light or dark
     preferredSize: Size.zero,
     //Size.zero for not to show appbar
     //set your own hight for appbar.
     
     child: AppBar(
         elevation: 0,
         brightness: Brightness.dark,

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

         backgroundColor: Colors.blue,
         title:Text("Hello World")
         //if you want to set title
     ),
),

Complete Code:

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

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
  
  SystemChrome.setSystemUIOverlayStyle(
       SystemUiOverlayStyle(
         statusBarColor: Colors.transparent
         //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.blue,
              title:Text("Hello World")
              //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
             ),)
         ),
    );
  }

}

Output:

Apply this code to your app, and see the output.

1 Commet on this Article

alex

Not working, the status bar is quite dark compared to the rest of the app

1 year ago


Please Wait...