How to show container in listview using wrap - flutter

Question

I'm trying to show title in box, and i want two box in a row, but it is not working, i'm using ListView.builder
here is the code
Widget build(BuildContext context) {
return SafeArea(
child: SingleChildScrollView(
child: Container(
color: Color(int.parse(bodycolor)),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Padding(
padding: EdgeInsets.all(16.0),
child: SingleChildScrollView(
child: Column(
children: [
SizedBox40(),
Align(
alignment: Alignment.center,
child: Text("Choose any one Business", style: GoogleFonts.montserrat(fontSize:20)),
),
ListView.builder(
shrinkWrap: true,
itemCount: books.length,
itemBuilder: (context, index) {
final book = books[index];
return Wrap(
spacing: 20.0,
runSpacing: 40.0,
children:[
InkWell( child: Container(
height: MediaQuery.of(context).size.height*0.15,
width: MediaQuery.of(context).size.width*0.4,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(
Radius.circular(10),
), ),
child:Text(book.title))),
SizedBox20(),
]
);
}),
SizedBox20(),
],
),
),
here is the snap
it shows in vertically, i want them 2 in row. please help if anyone know how to do this.

Answer 1

instead of Listview.builder, you can use GridView.builder
GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2 // don't forget to use cross count
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
itemCount: myProducts.length,
itemBuilder: (BuildContext ctx, index) {
return Container(
alignment: Alignment.center,
child: Text(myProducts[index]["name"]),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(15)),
);
}),
Complete source code:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
// Hide the debug banner
debugShowCheckedModeBanner: false,
title: 'Kindacode.com',
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
HomeScreen({Key key}) : super(key: key);
final List<Map> myProducts =
List.generate(100000, (index) => {"id": index, "name": "Product $index"})
.toList();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter test'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
itemCount: myProducts.length,
itemBuilder: (BuildContext ctx, index) {
return Container(
alignment: Alignment.center,
child: Text(myProducts[index]["name"]),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(15)),
);
}),
),
);
}
}
Output:
N.B: Don't forget to use crossAxisCount

Answer 2

You can use GridView.
GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (context, index) {
final book = books[index];
return InkWell(
child: Container(
height: MediaQuery.of(context).size.height * 0.15,
width: MediaQuery.of(context).size.width * 0.4,
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Text(book.title),
),
);
},
)