Category: UI

  • How to change the status bar color in Flutter, Android only

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

    Spread the love