This is my code for wrap widget which is having multiple material button representing tags, i don't know why there is a vertical space between each new row in the wrap widget

    Container(
                    width: double.infinity,
                    child: Wrap(
                      children: [
                        MaterialButton(
                          color: Colors.black,
                          minWidth: 1,
                          height: 25,
                          padding: EdgeInsets.zero,
                          onPressed: () {},
                          child: Text(
                            "#software",
                            style: TextStyle(color: defaultColor),
                          ),
                        ),
                        MaterialButton(
                          minWidth: 1,
                          height: 25,
                          padding: EdgeInsets.zero,
                          onPressed: () {},
                          child: Text(
                            "#software",
                            style: TextStyle(color: defaultColor),
                          ),
                        ),
                        MaterialButton(
                          minWidth: 1,
                          height: 25,
                          padding: EdgeInsets.zero,
                          onPressed: () {},
                          child: Text(
                            "#software",
                            style: TextStyle(color: defaultColor),
                          ),
                        ),
                        MaterialButton(
                          minWidth: 1,
                          height: 25,
                          padding: EdgeInsets.zero,
                          onPressed: () {},
                          child: Text(
                            "#software",
                            style: TextStyle(color: defaultColor),
                          ),
                        ),
                        MaterialButton(
                          minWidth: 1,
                          height: 25,
                          padding: EdgeInsets.zero,
                          onPressed: () {},
                          child: Text(
                            "#software",
                            style: TextStyle(color: defaultColor),
                          ),
                        ),
                        MaterialButton(
                          minWidth: 1,
                          height: 25,
                          padding: EdgeInsets.zero,
                          onPressed: () {},
                          child: Text(
                            "#software",
                            style: TextStyle(color: defaultColor),
                          ),
                        ),
                      ],
                    ),
                  ),

this is a picture describing the vertical space between the line , i reached a solution by set the running space to negative values and that worked for me, but i feel like its a bad practiceenter image description here

CodePudding user response：

Don't use MaterialButton directly. Use one of its descendants: ElevatedButton, TextButton or OutlinedButton.

In your case, TextButton is the closet to what you want to achieve, so you can use that as a starting point and then further customize its style.

Or, if you just want to allow clicking on the blue text, use GestureDetector or InkWell instead of using buttons.

CodePudding user response：

In your case I would use more common buttons such as https://www.notion.so/BUTTONS-IN-FLUTTER-f596d17ba17f418381b30ed140cd9239 and I would create a generalized button sending as parameters what I need from each button, so as not to generate more unnecessary code, you could also use column or row with mainAxisAlignment: MainAxisAlignment.spaceEvenly, to align your buttons.

CodePudding user response：

you can use two property here for controlling the space

1. spacing
2. runSpacing

please test it and share with us about the result.