CODEWITHSUNDEEP
flutterdart
MNBLabs
MNBLabs

Reputation: 95

How to have different status bar color in flutter for dark and light mode with safe area?

I have my Scaffold in Safe Area widget and I want to apply status bar theming but I guess Safe Area isn't allowing to do so.

HomePage:

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: Theme.of(context).brightness == Brightness.light
                ? const AssetImage('assets/images/lgt_bg.png')
                : const AssetImage('assets/images/drk_bg.png'),
            fit: BoxFit.cover,
          ),
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            title: const Text(
              "MnbPub",
            ),
          ),
          body: Container(),
        ),
      ),
    );

Theme file:

class LightTheme {
  static final apptheme = ThemeData.light().copyWith(
    appBarTheme: const AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: Color.fromARGB(255, 254, 222, 225),
        statusBarIconBrightness: Brightness.light,
        systemNavigationBarColor: Color.fromARGB(255, 254, 222, 225),
        systemNavigationBarIconBrightness: Brightness.light,
      ),
...

Also I want the change to happen globally and not only for home page.

Any help?

Upvotes: 0

Views: 1123

Answers (2)

Matthew Trent
Matthew Trent

Reputation: 3264

I've created a custom widget called the ThemedStatusBar that automatically ensures your status bar is the proper color based on the app's theme. Simply wrap your Scaffold with it:

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

class ThemedStatusBar extends StatelessWidget {
  const ThemedStatusBar({super.key, required this.child});

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion(
      value: Theme.of(context).brightness == Brightness.dark
          ? SystemUiOverlayStyle.light
          : SystemUiOverlayStyle.dark,
      child: child,
    );
  }
}

Your order of widgets should be ThemedStatusBar -> Scaffold -> then somewhere lower (not necessarily directly) a SafeArea -> <THE_REST_OF_YOUR_WIDGETS>

Upvotes: 2

flutterWithChris
flutterWithChris

Reputation: 46

Put the SafeArea around the Container in the body parameter.

The SafeArea will always clip your app bar & status bar theme if it is around the entire Scaffold.

Upvotes: 1

Related Questions