title: Flutter position Widget between bottom of screen and safe area
body: <p>In my app I have a <code>bottomBar</code> which is placed at the bottom right above the <code>SafeArea</code>:</p>
  <p><a href="https://i.stack.imgur.com/oiiFFl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oiiFFl.png" alt="enter image description here" /></a></p>
  <p>The problem is that I would like to have a white <code>Container</code> at the bottom (red arrow in image) so that for bigger iPhones (where the bottom of the screen <strong>IS NOT EQUAL</strong> to the <code>safeArea</code>) the empty place in the image if filled white.</p>
  <p>For phones where the bottom screen <strong>is equal</strong>  to the <code>safeArea</code> the <em><code>fillContainerHeight</code></em> should simply be nil/zero.</p>
  <p>This is my setup:</p>
  <pre><code>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) // -&gt; fill container
      ],
    )
  </code></pre>
  <p>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!</p>