Space between Column's children in Flutter

Question

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 1

You can solve this problem in different way.

If you use Row/Column then you have to use mainAxisAlignment: MainAxisAlignment.spaceEvenly

If you use Wrap Widget you have to use runSpacing: 5, spacing: 10,

In anywhere you can use SizeBox()

Answer 2

There are many answers here but I will put here the most important one which everyone should use.

1. Column

 Column(
          children: <Widget>[
            Text('Widget A'), // Can be any widget
            SizedBox(height: 20,), // height is space betweeen your top and bottom widget
            Text('Widget B'), // // Can be any widget
          ],
        ),

2. Wrap

     Wrap(
          direction: Axis.vertical, // We have to declare Axis.vertical, otherwise by default widget are drawn in horizontal order
            spacing: 20, // Add spacing one time which is same for all other widgets in the children list
            children: <Widget>[
              Text('child 1'),
              Text('child 2'),
            ]
        )

Answer 3

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

Answer 4

Just use padding to wrap it like this:

Column(
  children: <Widget>[
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World!'),
  ),
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World2!'),
  )
]);

You can also use Container(padding...) or SizeBox(height: x.x). The last one is the most common but it will depents of how you want to manage the space of your widgets, I like to use padding if the space is part of the widget indeed and use sizebox for lists for example.

Answer 5

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 horizontally
  runSpacing: 20, // to apply margin vertically
  children: <Widget>[
     Text('child 1'),
     Text('child 2')
  ]
)

Answer 6

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

1. Use Container and give some height:

   Column(
     children: <Widget>[
       Widget1(),
       Container(height: 10), // set height
       Widget2(),
     ],
   )
   

2. Use Spacer

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

3. Use Expanded

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

4. Use mainAxisAlignment

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

5. Use Wrap

   Wrap(
     direction: Axis.vertical, // make sure to set this
     spacing: 20, // set your spacing
     children: <Widget>[
       Widget1(),
       Widget2(),
     ],
   )