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.

1 Like

Hey @gopalshimpi There are a few ways that you can go about with the solution:

Method 1:

Put a SizedBox widget between the two TextWidgets of desired height. You can use this for Row children also by putting SizedBox widget of desired width. Following code shows a demo:

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

Method 2:

You can wrap your TextField Widgets in Padding widget and set the required padding 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!'),
  )
]);

The first method is more common but padding has more control as you can specify the boundaries for which you want padding(left, right, top, bottom) using EdgeInsets.only(left: 8.0), etc. But it’s totally dependent upon developer preference.

Yeah, you’ll have to define the space that the mainAxis Size is dividing. If you say devide up the free space evenly, but give it no free space, you wont see any space change. So define your free space and change the mainAxisSize, or manually put spacing inside or around the widgets.

2 Likes