Space between Column's children in Flutter

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.

Solution 1:

You can use Padding widget in between those two widget or wrap those widgets with Padding widget.

Update

SizedBox widget can be use in between two widget to add space between two widget and it makes code more readable than padding widget.

Ex:

Column(
  children: <Widget>[
    Widget1(),
    SizedBox(height: 10),
    Widget2(),
  ],
),

Solution 2:

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.

Solution 3:

you can use Wrap() widget instead Column() to add space between child widgets.And use spacing property to give equal spacing between children

Wrap(
  spacing: 20, // to apply margin in the main axis of the wrap
  runSpacing: 20, // to apply margin in the cross axis of the wrap
  children: <Widget>[
     Text('child 1'),
     Text('child 2')
  ]
)

Solution 4:

There are many ways of doing it, I'm listing a few here.

1. Use SizedBox and provide some height:

    Column(
      children: <Widget>[
        Widget1(),
        SizedBox(height: 10), // <-- Set height
        Widget2(),
      ],
    )
   

2. Use Spacer

    Column(
      children: <Widget>[
        Widget1(),
        Spacer(), // <-- Spacer
        Widget2(),
      ],
    )
   

3. Use Expanded

    Column(
      children: <Widget>[
        Widget1(),
        Expanded(child: SizedBox.shrink()), // <-- Expanded
        Widget2(),
      ],
    )
   

4. Set mainAxisAlignment

    Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround, // <-- alignments
      children: <Widget>[
        Widget1(),
        Widget2(),
      ],
    )
   

5. Use Wrap

    Wrap(
      direction: Axis.vertical, 
      spacing: 20, // <-- Spacing between children
      children: <Widget>[
        Widget1(),
        Widget2(),
      ],
    )