Flutter background of unsafe area in SafeArea widget. - dart

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

Wrap your SafeArea into a widget that adds a background:
Container(
color: Colors.red,
child: SafeArea(...),
),

Answer 2

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 3

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

Answer 5

I have combined both the above answers to achieve
the system theme set (dark/light)
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(),
],
),
),
),
),
),
),
);
}