CODEWITHSUNDEEP
flutterdartwidgetcontainersflutter-layout
Chris
Chris

Reputation: 2314

Flutter position Widget between bottom of screen and safe area

In my app I have a bottomBar which is placed at the bottom right above the SafeArea:

enter image description here

The problem is that I would like to have a white Container at the bottom (red arrow in image) so that for bigger iPhones (where the bottom of the screen IS NOT EQUAL to the safeArea) the empty place in the image if filled white.

For phones where the bottom screen is equal to the safeArea the fillContainerHeight should simply be nil/zero.

This is my setup:

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.end,
    // mainAxisSize: MainAxisSize.max,
    children: [
      SafeArea(
        child: Row(
          children: [
            Expanded(
                child: Container(
              height: 49,
              color: Colors.white,
            )),
            Container(
                height: 49,
                child: Image.asset('assets/images/bottomBar.png')),
            Expanded(
                child: Container(
              height: 49,
              color: Colors.white,
            )),
          ],
        ),
      ),
      Container(color: Colors.white) // -> fill container
    ],
  )

Right now the container is not being shown. What is the best way to solve my problem here? I couldn't find anything on this. Let me know if you need any more info!

Upvotes: 0

Views: 4876

Answers (1)

hnnngwdlch
hnnngwdlch

Reputation: 3051

You could try to use the stack widget like this (the second child (align widget) is positioned above your SafeArea widget):

return Stack(
      children: [
        SafeArea(
          child: Scaffold(
            appBar: AppBar(),
            body: // Your other widgets here
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            color: Colors.white,
            height: MediaQuery.of(context).padding.bottom;,
          ),
        )
      ],
    );

Another option would be to wrap your SafeArea in a Container and give it a white background while setting the top property to false (= meaning the SafeArea will not be applied to the top):

return Container(
      color: Colors.white,
      child: SafeArea(
        top: false,
        child: Scaffold(
          appBar: AppBar(),
          body: // Your other widgets here
        ),
      ),
    );

Upvotes: 3

Related Questions