Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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

In your case, OutlinedButton 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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading