Changing Status Bar and Navigation Bar Colors in Flutter 💻🌈

In a Flutter app, you can customize the colors of the status bar (the bar at the top of the screen that displays the time, battery status, etc.) and the navigation bar (the bar at the bottom of the screen) to match your app’s design. This can help create a more immersive user experience. In this article, we’ll look at how to change these colors using the SystemUiOverlayStyle class.

Setting Up the Environment 🛠️

Before we begin, make sure you have a Flutter development environment set up on your machine. You can follow the official [Flutter installation instructions] if you haven’t done this yet.

Applying to All Screens 🚀

To apply the status bar and navigation bar color changes to all screens in your app, you can use the SystemChrome.setSystemUIOverlayStyle method before calling runApp in your main function. Here’s how you can do it:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle.copyWith(
      statusBarColor: Colors.purple,
      systemNavigationBarColor: Colors.purple,
    ),
  );
  runApp(MyApp());
}

To make status bar text into black color (time, battery status, etc.),

SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle.dark.copyWith(
      statusBarColor: Colors.purple,
      systemNavigationBarColor: Colors.purple,
    ),
  );

In this example, we use SystemChrome.setSystemUIOverlayStyle to set the status bar and navigation bar colors, which will make them take on the color of the app’s background.

Applying to a Single Screen 🖥️

If you only want to change the status bar and navigation bar colors for a single screen, you can do so by setting the SystemUiOverlayStyle directly in the appBar of that screen. Here’s an example:

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
     appBar: AppBar(
       systemOverlayStyle: SystemUiOverlayStyle(
         systemNavigationBarColor: Colors.purple, // Navigation bar
         statusBarColor: Colors.purple, // Status bar
     ),
   ),
     body: Center(
       child: Text('Hello, world!'),
     ),
    );
  }
}

In this example, we set the status bar color to blue and the navigation bar color to purple for the Home screen only.

Conclusion 🎉

Customizing the status bar and navigation bar colors can help you create a more cohesive and visually appealing user interface in your Flutter app. Experiment with different colors and styles to find the combination that works best for your app’s design.

Thanks for reading this article ❤