Display ListView items in a row

Question

I am having a hard time figuring out how to get my FilterChips in a row. I would like to display all FilterChips per category in a row and not in a seperated column. Tried different approaches but non of them seems to work.

Hopefully someone can help me with this, thanks for help!

Here is my code:

    Widget _buildListView(List<Category> categories) {
    return Column(
      children: [
        Expanded(
          child: ListView.builder(
            shrinkWrap: true,
            itemCount: categories.length,
            itemBuilder: (context, index) {
              return _buildSection(categories[index]);
            },
          ),
        ),
      ],
    );
  }

  Widget _buildSection(Category category) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          category.title,
          style: TextStyle(fontSize: 18),
        ),
// How can I get my FilterChips side by side?
        Row(
          children: [
            Flexible(
              child: ListView.builder(
                  shrinkWrap: true,
                  physics: ClampingScrollPhysics(),
                  itemCount: category.interests.length,
                  itemBuilder: (context, index) {
                    Interest interest = category.interests[index];
                    return FilterChip(label: Text(interest.interest), onSelected: (isSelected){
                      selectedInterests.add(interest.id);
                    });
                    return Text(interest.interest);
                  }),
            ),
          ],
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: categories,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            List<Category> categories = snapshot.data;
            return _buildListView(categories);
          }

          return Center(child: CircularProgressIndicator());
        },
      ),
    );
  }

void · Accepted Answer · 2020-08-20T19:57:36.767

3

class StackOver extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.only(
          top: 60,
          left: 10.0,
          right: 10.0,
        ),
        child: Wrap(
          children: List.generate(
            10,
            (index) {
              return FilterChip(
                label: Text('index $index'),
                onSelected: (val) {},
              );
            },
          ),
        ),
      ),
    );
  }
}

RESULT:

edited Aug 20 '20 at 19:57

answered Aug 19 '20 at 17:07

void

12,787
3
28
42

With scrollDirection I get errors like this: 'constraints.hasBoundedHeight': is not true. – combi35 Aug 19 '20 at 17:10
Hope this helps. https://stackoverflow.com/questions/54774024/constraints-hasboundedheight-is-not-true-flutter – Ravi Garg Aug 19 '20 at 17:15
You need the `FilterChip` to be able to scroll horizontally if I understood your question? There is no need to wrap in a `Row` and `Flexible` widget then. I updated the answer. – void Aug 19 '20 at 17:17
Actually I dont want the FilterChips to be scrollable, just grouped together in a row. Is the ListView the wrong Widget for that purpose? – combi35 Aug 20 '20 at 19:39
If you don't want the FilterChips to be scrollable, you shouldn't use a ListView then. The `Wrap` widget is what you need. – void Aug 20 '20 at 19:56
Super, thank you very much! I combined it with [this stack](https://stackoverflow.com/questions/50441168/iterating-through-a-list-to-render-multiple-widgets-in-flutter/50451020) to iterate over the list. – combi35 Aug 20 '20 at 20:20

Display ListView items in a row

1 Answers1