Search code examples
flutterrow

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


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

Solution

  • 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