How to add space between Rows in flutter?

Question

main issue is i want to add some space between Rows and this Rows are children of SingleChildScrollView, my widget tree :

 child: SingleChildScrollView(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Row(
          // first row with 3 column
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(),
            Container(),
            Container(),
          ],
        ),
        Row(
          // second row also with 3 column ans so on 
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(),
            Container(),
            Container(),
            //Row( third  row also with 3 column ans so on
              //Row( fourth  row also with 3 column ans so on
            // ....
          ],
        ),
      ],
    ),
  ),

i got the following out put :

so how to add more space to the widget SingleChildScrollView , so to expect that mainAxisAlignment:MainAxisAlignment.spaceBetween put some space between the rows , or how simply add a space between rows?

Solution 1

Things like SizedBox work great if you are happy with a fixed pixel gap. Spacer is another alternative, and is flexed, which may or may not be what you want, depending on what you have it nested under. If you prefer to work with relative sizes, I can also recommend FractionallySizedBox, which operates on a percentage of the area, and works great for responsive designs. If you wanted to have a 5% vertical gap, for example, you could express this as:

FractionallySizedBox(heightFactor: 0.05),

Solution 2

try between the rows

SizedBox(height:20),

final code

 child: SingleChildScrollView(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Row(
          // first row with 3 column
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(),
            Container(),
            Container(),
          ],
        ),
        SizedBox(height:20),
        Row(
          // second row also with 3 column ans so on 
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(),
            Container(),
            Container(),
            //Row( third  row also with 3 column ans so on
              //Row( fourth  row also with 3 column ans so on
            // ....
          ],
        ),
      ],
    ),
  ),

Solution 3

Insert a Padding widget.

Row(...),
Padding(padding: EdgeInsets.only(bottom: 10),
Row(...)

Solution 4

You can also use Spacer( ... . ) For me Padding is ok

View more solutions

Comments

[Johny Saini]

try it let me know there is multiple way doing this thing.