Home > other >  In flutter, how to set spacing between row items inside of a column?
In flutter, how to set spacing between row items inside of a column?

Time:01-20

I create many Row items that contain inside of a Column and want to make spacing between each row items. I tried to set with mainAxisAlignment of Column. But nothing changes between each Row items. How to change or which widget I need to use for that?

Column(
            children: [
              Row(
                children: [
                  Flexible(
                    flex: 2,
                    fit: FlexFit.tight,
                    child: Container(child: kTextFieldLabelText('Name:')),
                  ),
                  Flexible(
                    flex: 6,
                    fit: FlexFit.loose,
                    child: Container(
                      //width: 100,
                      child: TextFormField(
                        decoration:
                        kTextFormFieldsDecoration('Enter your name'),
                        maxLines: 1,
                      ),
                    ),
                  ),
                ],
              ),
              Row(
                children: [
                  Flexible(
                    flex: 2,
                    fit: FlexFit.tight,
                    child: Container(child: kTextFieldLabelText('Name:')),
                  ),
                  Flexible(
                    flex: 6,
                    fit: FlexFit.loose,
                    child: Container(
                      //width: 100,
                      child: TextFormField(
                        decoration:
                        kTextFormFieldsDecoration('Enter your name'),
                        maxLines: 1,
                      ),
                    ),
                  ),
                ],
              ),
              Row(
                children: [
                  Flexible(
                    flex: 2,
                    fit: FlexFit.tight,
                    child: Container(child: kTextFieldLabelText('Name:')),
                  ),
                  Flexible(
                    flex: 6,
                    fit: FlexFit.loose,
                    child: Container(
                      //width: 100,
                      child: TextFormField(
                        decoration:
                        kTextFormFieldsDecoration('Enter your name'),
                        maxLines: 1,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),

CodePudding user response:

you can use also

Spacer(), or Spacer(flex: 1),

or use sized box determine your preferred height and width

SizedBox(height: // put here,),

and also sized box have other things like

   SizedBox.expand(),

either ways play with it

CodePudding user response:

If the children of the Row are of fixed size then you can use MainAxisAlignment for Row in order to arrange them accordingly.

Else if you have widgets that are Flexible then you may need to add a SizedBox with the required width between two widgets.

CodePudding user response:

You can use SizedBox Widget and set height or width to spacing vertical or horizontal between your Rows.

  •  Tags:  
  • Related