flutterlistviewchips

Wrap is not working in listview.builder flutter


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

but what i can achieved is this in picture 2enter image description here

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

Solution

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