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?/

CodePudding user response：

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

CodePudding user response：

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),
    );

CodePudding user response：

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,
),
);
}