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.
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}"));
}
}
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