Category: UI

Changing the status bar color is very easy in Flutter. There are a few ways to do this.

1. Globally in the main function

import 'package:flutter/services.dart';

void main() {

  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.red,
    ),
  );

  runApp(
    MyApp()
  );
}

2. Globally in the MaterialApp widget in ThemeData

return MaterialApp(
      title: 'FlutterFramework',
      debugShowCheckedModeBanner: false,
      themeMode: ThemeMode.light,
      theme: ThemeData(
        primaryColor: Colors.red,
        appBarTheme: AppBarTheme(
          systemOverlayStyle: SystemUiOverlayStyle(
            statusBarColor: Colors.red,
          ),
        ),
      ),
);

3. AppBar only

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(
    statusBarColor: Colors.red,
  ),
)