flutter - how to set width when wrapping on gridview?

Question

I have an issue when want to make a like Tags Widget using GridView, see result:

I want to make it as shown below:

but the width of the button is set automatically from GridView wrapping.

how to make the width set dynamically?

any answer will be appreciated.

Solution 1

class MyHomePage extends StatelessWidget {
  var tags = [
    "love",
    "instagood",
    "photooftheday",
    "beautiful",
    "fashion",
    "happy",
    "tbt",
    "cute",
    "followme",
    "like4like",
    "follow",
    "picoftheday",
    "me",
    "selfie",
    "summer",
    "instadaily"
  ];

  var selected_tags = ["love", "me", "summer"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Wrap(
        spacing: 8.0, // gap between adjacent chips
        runSpacing: 4.0, // gap between lines
        children: <Widget>[...generate_tags()],
      ),
    );
  }

  generate_tags() {
    return tags.map((tag) => get_chip(tag)).toList();
  }

  get_chip(name) {
    return FilterChip(
        selected: selected_tags.contains(name),
        selectedColor: Colors.blue.shade800,
        disabledColor: Colors.blue.shade400,
        labelStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        label: Text("#${name}"));
  }
}

Solution 2

You are trying to make a Chip (from material):
https://material.io/design/components/chips.html#

You should use the Chip Widget (or one of the listed variants):
https://api.flutter.dev/flutter/material/Chip-class.html

Them you should change the grid to a Wrap Widget (witch will contain the list of Chips): https://api.flutter.dev/flutter/widgets/Wrap-class.html

Comments

[Sagar Karwande]

You can use Chip variant as per you requirement from: Chips

[Muhammad Imanudin]

Sory im forgot attach my code. but your answer above is the solution I'm looking for

[Muhammad Imanudin]

I just heard about Chip Widget. this is what I'm looking for