how to make a list builder with a row - flutter

Question

how do i create a list builder that's going to return a row like in the picture or a list builder that goes horizontal axis until it finds the end of the screen and then goes next line please see this Image

Answer 1

Use a GridView.builder() to dynamically render as user scrolls.
Below example modified from this: https://www.kindacode.com/article/flutter-gridview-builder-example/
List<String> data = ["1", "2", "3", "4", "5", "6"];
return GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
itemCount: data.length,
itemBuilder: (BuildContext ctx, index) {
// Add your card/widget/grid element here
return Container(
alignment: Alignment.center,
child: Text(data[index]),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(15),
),
);
},
);

Answer 2

check this out - it worked for me
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Row(
children: <Widget>[
SizedBox(width: 15),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Card(
color: Colors.white,
child: Center(
child: Padding(
padding: EdgeInsets.all(75.0),
child: Text(
'1',
style: TextStyle(fontSize: 40, color: Colors.black),
),
),
),
),
Card(
color: Colors.white,
child: Center(
child: Padding(
padding: EdgeInsets.all(75.0),
child: Text(
'3',
style: TextStyle(fontSize: 40, color: Colors.black),
),
),
),
),
Card(
color: Colors.white,
child: Center(
child: Padding(
padding: EdgeInsets.all(75.0),
child: Text(
'5',
style: TextStyle(fontSize: 40, color: Colors.black),
),
),
),
),
],
),
SizedBox(width: 15),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Card(
color: Colors.white,
child: Center(
child: Padding(
padding: EdgeInsets.all(75.0),
child: Text(
'2',
style: TextStyle(fontSize: 40, color: Colors.black),
),
),
),
),
Card(
color: Colors.white,
child: Center(
child: Padding(
padding: EdgeInsets.all(75.0),
child: Text(
'4',
style: TextStyle(fontSize: 40, color: Colors.black),
),
),
),
),
Card(
color: Colors.white,
child: Center(
child: Padding(
padding: EdgeInsets.all(75.0),
child: Text(
'6',
style: TextStyle(fontSize: 40, color: Colors.black),
),
),
),
),
],
),
],
),
)),
);
}
}