Fixed number of rows, with horizontal scroll for chips - flutter

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(),
],
),
],
),
],
),