Make container widget fill parent vertically

Question

TL;DR Need the container to fill the vertical space so that it can act as a ontap listener. Have tried most solutions but nothing seems to work.

So what I am trying

Answer 1

If you want a Container to fill all available space, you can simply use:

  width: double.infinity,
  height: double.infinity

Explanation:

While this might seem like a "hack", it's actually what the Flutter team uses as well. See, the most "proper" way is probably to use:

  constraints: BoxConstraints.expand(),

But if you open up the source code of expand(), you will see:

  /// Creates box constraints that expand to fill another box constraints.
  ///
  /// If width or height is given, the constraints will require exactly the
  /// given value in the given dimension.
  const BoxConstraints.expand({
    double width,
    double height,
  }) : minWidth = width ?? double.infinity,
       maxWidth = width ?? double.infinity,
       minHeight = height ?? double.infinity,
       maxHeight = height ?? double.infinity;

So if you are absolutely certain you want to fill all spaces, you can intuitively pass in a number bigger than the screen size, like double.infinity.

Answer 2

I propose using Expanded widget (which allows us to avoid IntrinsicHeight widget), combine it with the Container's alignment property and therefore make it work properly even if the Container is not the only one at the screen.

Expanded(
  child: Container(
    alignment: Alignment.center,
    child: Text('Your text', textAlign: TextAlign.center))),

That way one also avoids potential app's crash which occurs often when you accidentally expand to infinity some parts of the widget tree both horizontally and vertically (that is why you are not able to use BoxConstraints widget in many cases).

One can read more about the problems of passing constraints in Flutter here - a must read: https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2

Answer 3

To stretch the container to full height of the parent use property constraints:BoxConstraints.expand() in container widget. Container occupy the complete space independent of the of child widget

Container(
  color: Colors.green,
  child: Text("Flutter"),
  constraints: BoxConstraints.expand(),
)

Please refer the link Container Cheat sheet for more about container

Answer 4

The trick is to combine an IntrinsicHeight widget and a Row with crossAxisAlignment: CrossAxisAlignment.stretch

This force the children of Row to expand vertically, but Row will take the least amount of vertical space possible.

Card(
  child: IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Container(
          width: 20.0,
          color: Colors.amber,
        ),
        // Expanded(...)
      ],
    ),
  )
)

Answer 5

As of Jan 2020 the simplest is to use an Expanded Widget

Expanded(flex: 1,
         child: Container(..),
            ),

https://api.flutter.dev/flutter/widgets/Expanded-class.html

Answer 6

There are many answers which suggest using two things

1. constraints: BoxConstraints.expand(),
2. height: double.infinity,

But both these answer will give you an error like

BoxConstraints forces an infinite height.

We can avoid these by calculating the height of the screen like

1. App Bar
2. Top Bar Space(Exist on the above App Bar)
3. Remaining screen

1. Get the MediaQuer

 final mediaQuery = MediaQuery.of(context);

2. Declare the AppBar Widget and same App Bar instance should be used in Scaffold App Bar

final PreferredSizeWidget appBar = AppBar(
      title: Text('Home'),
    );

3. Use calculated height

      Container(
              width: mediaQuery.size.width,
              height: (mediaQuery.size.height -
                  appBar.preferredSize.height -
                  mediaQuery.padding.top),
              color: Colors.red,
            ),

Output: