Posted in Flutter

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

Flutter – How to make Status Bar transparent and icon light/dark Posted on May 9, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

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

Output:

flutter transparent status bar icon

To make Status Bar color transparent Insert it into 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
   )
);

To set Status Bar Icon brightness (Light or Dark): Set App bar like below

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
             ),)
         ),
    );
  }

}

Apply this code to your app, and see the output, if you face any problem then write on comment below, I will try to resolve it.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

Your email address will not be published. Required fields are marked *