Wrap is not working in listview.builder flutter

Question

I want to achieve a layout of item chips(newest,most popular) like pic1

but what i can achieved is this in picture 2

i have searched many example but i don't get it where i did wrong in using WRAP.I tried to wrap the whole listview but not working. here is my code

Container(
              height: SizeConfig.screenHeight / 2,
              child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: _selectKeywords.length,
                  itemBuilder: (context, index) {
                    return Wrap(
                      children: <Widget>[
                        Chip(
                          label: Text(
                            _selectKeywords[index],
                          ),
                          onDeleted: () {
                            setState(() {
                              _selectKeywords.removeAt(index);
                            });
                          },
                        ),
                      ],
                    );
                  }),
            ),

@JaimeOrtiz It's a widget in the Flutter library. https://api.flutter.dev/flutter/material/Chip-class.html — BLKKKBVSIK, Jul 08 '21 at 17:48
@JaimeOrtiz the horizontal items like newest,most popular etc in pic 1 — Taqi Tahmid Tanzil, Jul 08 '21 at 17:50

score 2 · Accepted Answer · answered Jul 08 '21 at 17:53

You don't need to use a ListView.builder here, but you may want to try to use a List.generate like so:

Wrap(
      spacing: 5,
      children: List.generate(
        10,
        (index) {
          return Chip(
            label: Text(_selectKeywords[index]),
            onDeleted: () {
              setState(() {
                _selectKeywords.removeAt(index);
              });
            },
          );
        },
      ),
    );

Wrap is not working in listview.builder flutter

1 Answers1