Flutter: ChipList options in horizontal ListView

Question

When we create a ChipList in Flutter, when the chips are overflowed, the next chip will appear depends on the verticalDirection attribute (could be up/down).

But is it possible to put the chips in a horizontal ListView? So when it overflows, user can scroll to the right to see the next chips.

Here is the code part for the Filter Chip:

  Widget _SearchBody() => SingleChildScrollView(
        child: Container(
            child: FormBuilder(
          key: _formKey,
          child: Padding(
            padding: EdgeInsets.all(8),
            child: Column(
              children: <Widget>[
  ...
  ...
  Padding(
              padding: EdgeInsets.only(top: 8),
              child:
                  Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
                Align(
                    alignment: Alignment.centerLeft,
                    child: Text('Tipe bahan bakar')),
                FormBuilderFilterChip(
                  name: 'Fuel',
                  decoration: InputDecoration(),
                  spacing: 8,
                  options: [
                    FormBuilderFieldOption(
                        value: 'diesel', child: Text('Diesel')),
                    FormBuilderFieldOption(
                        value: 'hybrid', child: Text('Hybrid')),
                    FormBuilderFieldOption(
                        value: 'bensin', child: Text('Bensin')),
                    FormBuilderFieldOption(
                        value: 'listrik', child: Text('Listrik')),
                  ],
                ),
              ]),
            ),
  ...
  ...

Note: I use the Flutter Form Builder package.

And here is the result below, as can be seen the 4th chips is shown at below of the other 3 chips, while what I want is the 4th chips is to be still at the right of 3rd chips, and user can just scroll to the right at that screen part to see the 4th chips: Screenshot

Thank you.

score 1 · Answer 1 · answered Jul 31 '21 at 11:57

You can use a ListView with horizontal axis to make a list of chips scrollable to the right.

Just do it like this:

ListView(
    scrollDirection: Axis.horizontal,
    children: [
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
    ],
  )

This is it. The chips don't wrap anymore.

If you are already wrapping this ListView with a horizontal ListView you can just use a Column (just like you can't put two regular ListViews inside each other).

I hope I was able to help you!

Flutter: ChipList options in horizontal ListView

1 Answers1