Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a widget fill remaining space in a Column

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)
        ),
    ],
)

enter image description here

like image 457
Guster Avatar asked Apr 23 '18 09:04

Guster


People also ask

How do you fill a column with space in Flutter?

In Flutter, you can make a widget fill up the remaining space of a Row or Column by wrapping it inside an Expanded or a Flexible widget.

How do I add a space between widgets?

Using MainAxisAlignment (Recommended) Using the MainAxisAlignment property of Column and Row, you can add the predefined space between the widgets. If you use the MainAxisAlignment property, you don't need to add any extra widgets in between the widgets.

How do I add a column to a widget?

Simply add a columns block to your layout and then click on the add button to start adding widgets.


2 Answers

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)
        ),
    ),
],
)
like image 94
Kevin Walter Avatar answered Oct 16 '22 18:10

Kevin Walter


You can use:

  1. Expanded with Align to position child

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

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

    Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween, // add this
      children: [
        FlutterLogo(colors: Colors.orange),
        FlutterLogo(colors: Colors.blue),
      ],
    )
    
like image 27
CopsOnRoad Avatar answered Oct 16 '22 20:10

CopsOnRoad