How to Make Widget Fill Remaining Space In Column?

How to Make Widget Fill Remaining Space In Column?

When a user makes use of Column Widget generally it happens that it will occupy only the required space and then What about the remaining space. So in this article, we will go through How to Make Widget Fill Remaining Space In Column?

How to Make Widget Fill Remaining Space In Column?

The Expanded Widget expands to space it can use. Although I think it behaves a bit differently in a Row  Widget or Column Widget.

Consider a code snippet like the below:

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

Users can also make use of Space Widget. Code Snippet will look  like the below:

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

• User can also try a combination like the below: Expanded with Align to position child

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

• Spacer Widget

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

• mainAxisAlignment

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

Conclusion:

In this article, we have been through How to Make Widget Fill Remaining Space In Column Widget?

Thanks for being with us on a Flutter Journey.
Kindly do let us know if you need more assistance with Flutter Development.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.