How to Make Wrap Widget Scrollable in Flutter?

The Wrap widget in Flutter is a widget that displays its children in rows or columns. The goal of a Wrap is to arrange each child on the main axis, which runs vertically down the center, taking care of spacing between them. Wrap adds a new run adjacent to the existing children in the cross axis if there isn’t enough room to accommodate its children.

By default, Wrap generates multiple runs based on the total width of the children. If you set a maximum width on the Wrap, it will use that width as the run length and generate as many runs as necessary to fit all the children within that width. This can be useful if you have children of different sizes and you want them all to have equal widths. You can also pass a spacing between each run, which defaults to 16px.

In order to make a Wrap widget scrollable, we will use the SingleChildScrollView widget. SingleChildScrollView widget is a simple container that scrolls its child within itself. In order to make it scrollable, we need to give it a defined height or width.

SizedBox(
  height: 300.0,
  child: SingleChildScrollView(
    child: Wrap(
      children: [
      ],
    ),
  ),
)