How to set status bar color when AppBar not present in Flutter

In Flutter, if your application does not use AppBar but you still want to set the status bar color, you can use the SystemChrome class to customize the status bar style. This class is part of the services library and allows you to directly control the appearance of the system interface.

Here are the specific implementation steps and code examples:

1. Import the required library

First, ensure that your Flutter project imports the services library:

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

2. Set the status bar color and brightness

Next, in your widget's build method or initialization method, use SystemChrome.setSystemUIOverlayStyle() to set the status bar color and brightness. For example:

dart
@override
void initState() {
  super.initState();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.blue, // Set the status bar color
    statusBarBrightness: Brightness.dark, // Set the status bar brightness
  ));
}

In this example, statusBarColor controls the status bar color. You can replace Colors.blue with any color you want. statusBarBrightness controls the brightness of the status bar icons; Brightness.dark makes the status bar icons and text appear dark (suitable for light backgrounds), while Brightness.light provides light icons (suitable for dark backgrounds).

3. Apply style changes

Ensure these settings are applied before the application starts or before the layout structure is determined to ensure the status bar style is correctly applied.

Summary

By using SystemChrome.setSystemUIOverlayStyle(), you can flexibly control the status bar color and style in Flutter applications even without AppBar. This approach is particularly suitable for modern applications that require highly customized UI.