62

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

Improve this question
1

6 Answers 6

Reset to default
211

Wrap your SafeArea into a widget that adds a background:

Container( color: Colors.red, child: SafeArea(...), ),
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

How would you make only the area padded by the SafeArea that color? Instead of all child content?
@MisterJimson give a background color to the child as well to eliminate it
For some reason, this color occludes system icons on the system statusbar completely with my landscape app. Actually, with or without the colonization, I lose the system icons. I wonder if this is a limitation of SafeArea.
22

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(...), ), ), )
Improve this answer

1 Comment

This helps with adjusting the safe areas text and icon colors
9

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.

Improve this answer

1 Comment

A container containing another container with different colors solved an issue I had today. Your answer inspired that idea. Thank you Tarique.
8

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

Improve this answer

Comments

2

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(), ], ), ), ), ), ), ), ); }
Improve this answer

Comments

2

For me I was wrapping the Scaffold with the SafeArea

SafeArea( child : Scaffold( body: //your UI ) )

Instead move the SafeArea inside the Scaffold's body

Scaffold( body: SafeArea( child: //your UI ) )
Improve this answer

Comments