How to display a list of buttons into a group instead of list view? flutter - flutter

Question

I want to display a dynamic list inside a wrap widget. I want to display it like this.i tried group_button package but it doesn't work on list. I tried to duplicate the list into list but that doesn't help me in disappearing the list by using list.clear() when pressed.
Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: <Widget>[
ElevatedButton(
child: Text('hi'),
onPressed: () => {
}
),
ElevatedButton(
child: Text('hello'),
onPressed: () => {
}
),
ElevatedButton(
child: Text('how are you?'),
onPressed: () => {
}
),
ElevatedButton(
child: Text('comeon'),
onPressed: () => {
}
),
ElevatedButton(
child: Text('weather'),
onPressed: () => {
}
),
ElevatedButton(
child: Text('welcome'),
onPressed: () => {
}
),
ElevatedButton(
child: Text('thank you'),
onPressed: () => {
}
),
],
),
But my list is dynamic and wrap doesn't work on listview
Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: <Widget>[
ListView.builder(
itemCount: label.length,
shrinkWrap:true,
itemBuilder: (context, j) {
return ElevatedButton(
child: Text(label[j]),
onPressed: () => {
}
);
}
)
],
),
the label is List. what can I do?/

Answer 1

Try this:
1. Create a new widget (Tag)
class Tag extends ConsumerWidget {
final String? text;
final VoidCallback? onTap;
const Tag({
Key? key,
this.text,
this.onTap,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return InkWell(
overlayColor: MaterialStateProperty.all(Colors.transparent),
hoverColor: Colors.transparent,
focusColor: Colors.transparent,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: onTap,
child: Container(
child: FittedBox(
child: Container(
margin: EdgeInsets.only(right: 6, bottom: 6),
padding: EdgeInsets.symmetric(
horizontal: 20,
vertical: 10,
),
child: Text(
"$text",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(4),
),
),
),
),
);
}
}
2. Use Wrap and put it in a SingleChildScrollView to make it scrollable
SingleChildScrollView(
child: Wrap(
children: [
Tag(
text: "One",
onTap: (){
print("one");
}
),
Tag(
text: "Two",
onTap: (){
print("two");
}
),
]
)
)

Answer 2

this example will help you.
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
List<String> data = ["one", "two", "three" , "four" ,"five" , "five"];
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Wrap(
children: data.map((e) => _chip(e, context)).toList(),
spacing: 8,
);
}
}
Widget _chip(String data, BuildContext context) => ChoiceChip(
labelPadding: EdgeInsets.all(2.0),
label: Text(
data,
style: Theme.of(context)
.textTheme
.bodyText2!
.copyWith(color: Colors.white, fontSize: 14),
),
selectedColor: Colors.deepPurple,
selected: true,
elevation: 1,
padding: EdgeInsets.symmetric(horizontal: 10),
);

Answer 3

You can achieve exact same with this package.
Below sample code for this:
List<String> tags = [];
List<String> options = [
'News', 'Entertainment', 'Politics',
'Automotive', 'Sports', 'Education',
'Fashion', 'Travel', 'Food', 'Tech',
'Science',
];
#override
Widget build(BuildContext context) {
return ChipsChoice<String>.multiple(
value: tags,
onChanged: (val) => setState(() => tags = val),
choiceItems: C2Choice.listFrom<String, String>(
source: options,
value: (i, v) => v,
label: (i, v) => v,
),
);
}