CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-widget
Asmoun
Asmoun

Reputation: 1747

How to add space between Rows in flutter?

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 :

picture from emulator

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?

Upvotes: 5

Views: 17162

Answers (5)

Paul Mundt
Paul Mundt

Reputation: 509

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

Upvotes: 7

ElsayedDev
ElsayedDev

Reputation: 650

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

Upvotes: 1

Johny Saini
Johny Saini

Reputation: 909

Row(...),
SizedBox(width:20).  // If want horizontal space use width  for vertical use height
Row(...)

you can use SizedBox b/w Rows

Upvotes: 0

iKreateCode
iKreateCode

Reputation: 209

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
            // ....
          ],
        ),
      ],
    ),
  ),

Upvotes: 4

Denis Ken
Denis Ken

Reputation: 244

Insert a Padding widget.

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

Upvotes: 2

Related Questions