CODEWITHSUNDEEP
dartflutter
user6274128
user6274128

Reputation:

Flutter background of unsafe area in SafeArea widget.

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

Upvotes: 61

Views: 66855

Answers (6)

amr samy
amr samy

Reputation: 101

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

Upvotes: 2

Eric Aig
Eric Aig

Reputation: 1094

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

Upvotes: 7

Tarique Naseem
Tarique Naseem

Reputation: 1856

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.

Upvotes: 8

Sravan
Sravan

Reputation: 1941

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

Upvotes: 1

function1983
function1983

Reputation: 1156

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

Upvotes: 18

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 277297

Wrap your SafeArea into a widget that adds a background:

Container(
  color: Colors.red,
  child: SafeArea(...),
),

Upvotes: 206

Related Questions