Achieve multiple rows in gridview flutter

Question

I am trying to get the layout as in the gif below but could not get any resource to continue with. There are two rows with multiple columns and is scrollable. How can I achieve such layout?

score 1 · Accepted Answer · answered Dec 06 '21 at 15:15

1

As your question says, you follow this approach, and it is not containing multiple columns, items are having different width. This snippet will work fine.

SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Column(
                children: [
                  Row(
                    key: const ValueKey("row1"),
                    children: _items(),
                  ),
                  Row(
                    key: const ValueKey("row2"),
                    children: _items(),
                  ),
                ],
              ),
            ),

answered Dec 06 '21 at 15:15

Md. Yeasin Sheikh

54,221
7
29
56

how to handle it if the data are from same array? – Nabin Dhakal Dec 07 '21 at 04:38
1

you can split the list like for 1st part `items.sublist(0, items.length ~/ 2)` and second row `items.sublist(( items.length ~/ 2), items.length)` – Md. Yeasin Sheikh Dec 07 '21 at 08:31
Help me with this also please https://stackoverflow.com/questions/70302909/pin-the-layout-below-and-start-scrolling-at-certain-position-in-flutter – Nabin Dhakal Dec 10 '21 at 10:52

score 0 · Answer 2 · answered Dec 06 '21 at 10:43

You can achieve this by SingleChildScrolView widget with axis : horizontal and that listitem will be created using FilterChip widget.

like this :

 SingleChildScrollView(
                                scrollDirection: Axis.horizontal,
                                child:  Wrap(
                                  spacing: 10.0,
                                  runSpacing: 5.0,
                                  children: [...generateTags()],
                                ),
                              ),






 generateTags(){
    return _keywords.map((e) => FilterChip(label : e)).toList();
  }



var _keywords =["hello" , "hi" ,"words 1" , "word 2"];

I could achieve what you have suggested but my question is different. I want to show the list items values in 2 rows with multiple columns as in gif mentioned — Nabin Dhakal, Dec 06 '21 at 10:51

Achieve multiple rows in gridview flutter

2 Answers2