How to make a widget fill remaining space in a Column
FlutterDartFlutter LayoutFlutter Problem Overview
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)
),
],
)
Flutter Solutions
Solution 1 - Flutter
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)
),
),
],
)
Solution 2 - Flutter
You can use:
-
Expanded
withAlign
to position childColumn( 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), ], )
Solution 3 - Flutter
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(),
],
Solution 4 - Flutter
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)
),
],
)