how to remove the space between the lines(rows) of a wrap widget (flutter)?

Issue

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

Solution

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.

Answered By – user1032613

Answer Checked By – Mary Flores (FlutterFixes Volunteer)