Is there are way to add two different color Iphone x SafeArea on Flutter

Question

I would like to know is there any way to add two different colors to iPhone X SafeArea?

On React Native this can be fixed by adding two SafeAreaView. Does anyone know how to fix this one on flutter?

Thanks

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: SafeArea(
        left: true,
        top: true,
        right: true,
        bottom: true,
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ), 
        ),
      ),
    );
  }

Answer 1

You can do one simple thing => Mark top property of SafeArea to false so the top area of the phone will take the background color of the AppBar and the bottom SafeArea will take the color of the parent container. Ideally, I would suggest if you are bounding your scaffold inside SafeArea then it's top SafeArea color should be the same as AppBar background color and bottom SafeArea color is as per your requirement(parent container's color).

I modified your code with two different colors:

Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: SafeArea(
        top: false,        
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: AppBar(
            backgroundColor: Colors.orange,
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ), 
        ),
      ),
    );
  }

Option 2: If you are using a scaffold then you can simply bind your body widget inside and it will fix your problem.

Answer 2

In SafeArea widget, we have some elements like bottom, top,...

if set bottom = true, SafeArea will include bottom. Do respectively with top element.

To get the height of bottom/top area, you can reach by this way MediaQuery.of(context).padding.bottom.

To make some background colors for bottom/top area, you can add a Container widget which have a height as above.

Answer 3

So, i find this method to do that. You can change static colors, i did that for example. I don't know is it right method, but it works. I think that @dhaval-kansara's method is not what i wanted, because status bar is transparent and on scroll it overflows. I accept criticism in my address, as I am still a beginner and may not know a lot. (sorry for my english)

    import 'package:flutter/material.dart';
    
    class ColoredSafeArea extends StatelessWidget {
      final Color topColor;
      final Color bottomColor;
      final Color color;
      final Widget child;
    
      const ColoredSafeArea(
          {Key key,
          this.topColor,
          this.bottomColor,
          this.color,
          @required this.child,})
          : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return ColoredBox(
          color: bottomColor ?? Colors.yellow, // bottombar color
          child: SafeArea(
            top: false,
            child: ColoredBox(
              color: topColor ?? Colors.blue, // statusbar color
              child: SafeArea(
                top: true,
                child: ColoredBox(
                  color: color ?? Colors.teal, // background color
                  child: child,
                ),
              ),
            ),
          ),
        );
      }
    }

Answer 4

just wrap SafeArea in a styled container

return Scaffold(
  body: Container(
    decoration: const BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/images/backgrounds/path'),
        fit: BoxFit.cover,
      ),
    ),
    child: SafeArea(
      child: Center(
        child: Column(
          children: [],
        ),
      ),
    ),
  ),
);