How to make a widget fill remaining space in a Column

Question

In Android, we can do the following to make ImageView to fill as much space as possible depending on the size of the TextView.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

How do we achieve this in Flutter? Assume I need to make Datetime(green) to fill as much as possible.

new Column(
    children: <Widget>[
        new Text('Title',
            style: new TextStyle(fontWeight: FontWeight.bold)
        ),
        new Text('Datetime',
            style: new TextStyle(color: Colors.grey)
        ),
    ],
)

Don't you want the *image* to fill up, not the text? it's an entirely different subject making the font larger — Pluriscient, Apr 23 '18 at 11:36
I've edited the question. Please ignore the image, basically I just want to make the Datetime(the one in green) to fill as much height as possible depending on the size of Title. The font will not change. — Guster, Apr 24 '18 at 02:51

score 143 · Accepted Answer · answered Apr 23 '18 at 10:04

143

Not 100% sure but I think you mean this. The Expanded widget expands to the space it can use. Althought I think it behaves a bit differently in a Row or Column.

new Column(
children: <Widget>[
    new Text('Title',
        style: new TextStyle(fontWeight: FontWeight.bold)
    ),
    new Expanded(
        child: new Text('Datetime',
             style: new TextStyle(color: Colors.grey)
        ),
    ),
],
)

answered Apr 23 '18 at 10:04

Kevin Walter

6,507
8
28
32

Expanded will take remaining space in Row or Column. – Faizan Mubasher Feb 16 '21 at 13:51
Expanded takes area, But in release app, it shows the `RenderFlex` error, And All the widgets in expanded are can not be seen. – Nachiket Gohil Mar 19 '21 at 15:29
In my case `Expanded` were not working inside `Column`, because the `Column` itself were wrapped by `ListView`, hence removing unnecessary `ListView`, did the work. – ArifMustafa Oct 08 '22 at 00:58

score 32 · Answer 2 · answered May 01 '20 at 12:30

You can use:

Expanded with Align to position child

Column(
  children: [
    FlutterLogo(),
    Expanded( // add this
      child: Align(
        alignment: Alignment.bottomCenter,
        child: FlutterLogo(),
      ),
    ),
  ],
)

Spacer

Column(
  children: [
    FlutterLogo(),
    Spacer(), // add this
    FlutterLogo(),
  ],
)

mainAxisAlignment

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // add this
  children: [
    FlutterLogo(colors: Colors.orange),
    FlutterLogo(colors: Colors.blue),
  ],
)

score 13 · Answer 3 · answered Dec 30 '19 at 08:24

If you need just to add blank space, use Spacer()

new Column(
children: <Widget>[
    new Text('Title',
        style: new TextStyle(fontWeight: FontWeight.bold)
    ),
    new Text('Datetime',
        style: new TextStyle(color: Colors.grey)
    ),
    Spacer(),
],

score 3 · Answer 4 · edited Jan 10 '23 at 12:54

3

Flexible(
  child: Column(
    mainAxisAlignment:MainAxisAlignment.spaceBetween,
    children: <Widget>[
        new Text('Title',
            style: new TextStyle(fontWeight: FontWeight.bold)
        ),
        new Text('Datetime',
            style: new TextStyle(color: Colors.grey)
        ),
  ],
),

edited Jan 10 '23 at 12:54

Ravindra S. Patil

11,757
3
13
40

answered Apr 03 '22 at 12:16

Ahmad Abdullah

111
3

score 1 · Answer 5 · answered Nov 27 '22 at 06:11

This is how it worked in my case:

IntrinsicHeight(
      child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Flexible(
              child: Image.memory(
                File('path').readAsBytesSync(),
                width: 150,
                height: 150,
              ),
              flex: 5,
            ),
            Flexible(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('Title',
                      style: TextStyle(fontWeight: FontWeight.bold)
                  ),
                  Text('Datetime',
                      style: TextStyle(color: Colors.grey)
                  ),
                ],
              ),
              flex: 1,
            ),
          ]),
    ),

Victor Batista · Answer 6 · 2023-04-25T20:08:02.253

0

You must give a height to the Row, so its children knows the avaliable space. You can do it wrapping the Row with an IntrinsicHeight Widget;

edited Apr 25 '23 at 20:08

answered Apr 25 '23 at 20:07

Victor Batista

5
2

How to make a widget fill remaining space in a Column

6 Answers6

Linked