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.