How to change status bar color in Flutter?

Changing the status bar color in Flutter typically involves several steps, which can be achieved by using the SystemChrome class from the services library. Below are the specific steps and code examples:

Step 1: Add Dependencies

First, ensure your Flutter project imports flutter/services.dart. This library provides the SystemChrome class, which controls system UI elements on the device, including the status bar color.

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

Step 2: Set the Status Bar Color

You can call this method anywhere in your application, such as within the main() function or in the initState() method of a specific page. Use the SystemChrome.setSystemUIOverlayStyle() method to configure the system UI style, including the status bar color.

dart
void main() {
  runApp(MyApp());
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.blue, // Set the status bar color
    statusBarBrightness: Brightness.dark, // Status bar text brightness (for dark backgrounds, use light text)
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

In the example above, statusBarColor is set to blue, and statusBarBrightness is set to Brightness.dark, indicating that the status bar text color will be white, which is more legible on dark backgrounds.

Note

• Ensure you select appropriate colors and contrast when setting the status bar color to maintain clear visibility of content.
• Different platforms may support status bar colors differently. Test your application on all target platforms to verify consistent behavior.

By following these steps, you can conveniently customize the status bar color in your Flutter application as needed. This approach significantly enhances user experience and supports visual consistency with your app's branding.