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: