Flutter background of unsafe area in SafeArea widget.

Question

When I provide the SafeArea to a Widget, then it gets some margin from the notches and home button (horizontal line in iPhone X +). How can I change the background of the unsafe area ? (The margin portion)?

Answer 1

Another way to do it.

import 'package:flutter/services.dart';

Scaffold(
  body: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light.copyWith(
      statusBarColor: Theme.of(context).primaryColor
    ),
    child: SafeArea(
      child: Container(...),
    ),
  ),
)

Answer 2

Following on from Rémi Rousselet's answer...

In my case, I created a new widget called ColoredSafeArea:

import 'package:flutter/material.dart';

class ColoredSafeArea extends StatelessWidget {
  final Widget child;
  final Color? color;

  const ColoredSafeArea({
    Key? key,
    required this.child,
    this.color,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color ?? Theme.of(context).appBarTheme.backgroundColor,
      child: SafeArea(
        child: Container(
          color: Theme.of(context).colorScheme.background,
          child: child,
        ),
      ),
    );
  }
}

And use this in place of SafeArea in my Scaffold. I have it set up to use the current AppBar colour from my theme, by default. But you can use whatever works for you, of course.

Basically, this widget will change the SafeArea colour without affecting your app background colour, due to the Container within, which takes the background colour from the current theme's colorScheme. The advantage of this is that the background colour will work with any dark or light themes you have set up.

Answer 3

I have combined both the above answers to achieve

1. the system theme set (dark/light)
2. the color/gradient of unsafe area

The code I've used is

var brightness = SchedulerBinding.instance.window.platformBrightness;
bool isDarkModeOn = brightness == Brightness.dark;

Widget build(BuildContext context) {
    return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: isDarkModeOn
            ? SystemUiOverlayStyle.dark.copyWith(
                statusBarColor: Theme.of(context).primaryColor,
              )
            : SystemUiOverlayStyle.light.copyWith(
                statusBarColor: Theme.of(context).primaryColor,
              ),
        child: Container(
          decoration: getScreenGradient(),
          child: SafeArea(
            child: Container(
              child: Center(
                child: Stack(
                  children: [
                    getBackgroundImage(),
                    getBody(),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

Answer 4

This is probably the easiest way to accomplish this:

const Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Text(
          "White scaffold background that also applies to status bar",
          style: TextStyle(fontSize: 20),
        ),
      ),
    );

Basically use SafeArea as a child of Scaffold and set the scaffold's background color to whatever you want or use ThemeData to set it globally using the scaffoldBackgroundColor prop