Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to Change Status Bar Color on Flutter

Flutter is best for easy User Interface Design, In this example, we are going to show you the easiest way to set Status Bar Color on Flutter. You can set any color or make a transparent status bar. See the example below:

Previous Similar Article: How to make Status Bar transparent and icon light/dark on Flutter

How to Set Status Bar Color:

import 'package:flutter/services.dart';
SystemChrome.setSystemUIOverlayStyle(
       SystemUiOverlayStyle(
         statusBarColor: Colors.deepPurpleAccent
         //color set to purple or set your own color
      )
);

You can replace it with your own color, put this code inside widget build, or inside the main() method.

How to Make Status Bar Color Transparent:

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

You can also change the brightness of status bar icons light or dark with AppBar Widget:

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

Full Code Example:

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

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    )
  );
}

class MyApp extends StatefulWidget{
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    
    SystemChrome.setSystemUIOverlayStyle(
       SystemUiOverlayStyle(
         statusBarColor: Colors.deepPurpleAccent
         //color set to purple or set your own color
      )
    );

    return Scaffold(
          appBar: AppBar(
              title:Text("Change Status Bar Color"),
              backgroundColor: Colors.deepOrange,
          ),
          body: Container( 
              margin: EdgeInsets.only(top:80),
              alignment: Alignment.topCenter,
              child: Text("Change Status Bar Color.") 
          )
      );
  }
}

Output Screenshot:

In this way, you can change the status bar color on Flutter. 

No any Comments on this Article


Please Wait...