Fixed number of rows, with horizontal scroll for chips

Question

I have tried using gridlist, flutter staggered grid view but was still not able to do it. This is what I would like it to look like. Intended look

The best i could do is this, but the problem is that if i use a grid it gives each element same width.

GridView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: widget.profile.interests.length,
    gridDelegate:
    new SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 50,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
    childAspectRatio: 0.3),
    itemBuilder: (BuildContext context, int index) {
        return CardWidget(context, index);
    })

output

Answer 1

You can use ListView instead...

ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Row(
            children: <Widget>[
              CardWidget('Long text'),
              CardWidget('Even longer text'),
              CardWidget('Long text'),
              CardWidget('Even longer text'),
              CardWidget('Text'),
            ],
          ),
          Row(
            children: <Widget>[
              CardWidget('Text'),
              CardWidget('Short text'),
              CardWidget('Text'),
              CardWidget('Short text'),
              CardWidget('Long text'),
              CardWidget('Even longer text'),
            ],
          )
        ])
      ],
    );

OUTPUT

UPDATE WITH BUILDER

Here is another solution with builder. There is probably better solution for this. It just a first one what cross my mind

List<String> list = ['Long text', 'Even longer text', 'Long text', 'Even longer text', 'Text', 'Text', 'Short text', 'Text', 'Short text', 'Long text', 'Even longer text'];

SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(
              height: 50,
              child: ListView.builder(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemCount: list.length,
                itemBuilder: (context, index) {
                  return index.isEven ? CardWidget(list[index]) : Container();
                },
              ),
            ),
            SizedBox(
              height: 50,
              child: ListView.builder(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemCount: list.length,
                itemBuilder: (context, index) {
                  return index.isOdd ? CardWidget(list[index]) : Container();
                },
              ),
            )
          ],
        ),
      )

Answer 2

List<int> topRow = [];
List<int> bottomRow = [];

  List<int> _addRowElements() {
    for (int i = 0; i < numbers.length; i++) {
      if (i.isEven) {
        topRow.add(numbers[i]);
      } else {
        bottomRow.add(numbers[i]);
      }
    }
    return topRow;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: MediaQuery.of(context).size.width,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      ..._addRowElements()
                          .map(
                            (number) => TextAndIconWidget(
                              label: number.toString(),
                            ),
                          )
                          .toList(),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      ...bottomRow
                          .map(
                            (number) => TextAndIconWidget(
                              label: number.toString(),
                            ),
                          )
                          .toList(),
                    ],
                  ),
                ],
              ),
            ],
          ),