dart - Flutter - How to wrap list of chipsets with a button horizontally together

Question

I'm new to flutter and have been trying to get a list of chipsets wrapped in a Wrap widget with the ability to add more of them through a button shown in the image. However, the button isn't able to wrap along with the chipset horizontally. Below is an image of the design to make it clearer.

Code:

Container(
child: Wrap(
  children: [
    Container(
      child: Wrap(
        children: _chipsetList,
      ),
    ),
    SizedBox(width: 2),
    Container(
        height: 35,
        width: 35,
        child: FittedBox(
          child: FloatingActionButton(
            heroTag: null,
            elevation: 0,
            shape: StadiumBorder(
                side: BorderSide(width: 2.0)),
            onPressed: () {
              _getMoreChips(context);
            },
            child: Icon(Icons.add),
          ),
        ))
  ],
),),

I tried to experiment with SingleChildScrollView property or with Wrap direction but in vain. What could be a way to get this design working?

question from:https://stackoverflow.com/questions/65852540/flutter-how-to-wrap-list-of-chipsets-with-a-button-horizontally-together

Answer 1

Seems you want to put chips and the button in the single wrap. To do so, combine them in a single list and use this list as wrap's children

List<Widget> items = List.from(_chipsetList); // copy
Widget button = FloatingActionButton();
items.add(button);
Wrap(
  children: items,
)

Or, using spread operator

Wrap(
  children: [
    ..._chipsetList,
    FloatingActionButton(),
  ],
)