Space between Column's children in Flutter

dart flutter flutter-layout
Sachin Soma picture Sachin Soma · Oct 12, 2018 · Viewed 91.6k times · Source

I have a Column widget with two TextField widgets as children and I want to have some space between both of them.

I already tried mainAxisAlignment: MainAxisAlignment.spaceAround, but the result was not what I wanted.

Answer

Marcel picture Marcel · Oct 14, 2018

You can put a SizedBox with a specific height between the widgets, like so:

Column(
  children: <Widget>[
    FirstWidget(),
    SizedBox(height: 100),
    SecondWidget(),
  ],
),

Why to prefer this over wrapping the widgets in Padding? Readability! There is less visual boilerplate, less indention and the code follows the typical reading-order.

Related questions

Show/hide widgets in Flutter programmatically

In Android, every single View subclass has a setVisibility() method that allows you modify the visibility of a View object There are 3 options of setting the visibility: Visible: Renders the View visible inside the layout Invisible: Hides the View, but …

Read More
Flutter - Wrap text on overflow, like insert ellipsis or fade

I'm trying to create a line in which center text has a maximum size, and if the text content is too large, it fits in size. I insert the TextOverflow.ellipsis property to shorten the text and inserting the triple …

Read More
How to add image in Flutter

I am developing Flutter app for the first time.. I have an issue in adding a image. I have a below questions : Where to create images folder? Where to add assets tag in pubspec.ymal? Is there any assets folder …

Read More