How to avoid overlap in widget inside GridView? - flutter

Question

The widget inside the gridView overlap each other , the bottom portion of the widget is overlapped by another widget , How to avoid overlap in widget inside GridView?I want to avoid the overlap amoung the widget.
Here is my codes
It contain a gridview builder containing the widget, the widget is made by stack , position.fill
// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables
import 'package:flutter/material.dart';
import 'package:iconsax/iconsax.dart';
class WorkshopsCloseToYouPage extends StatelessWidget {
const WorkshopsCloseToYouPage({super.key});
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: GridView.builder(
itemCount: 6,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, crossAxisSpacing: 4.0, mainAxisSpacing: 4.0),
itemBuilder: (BuildContext context, int index) {
return workshopCard();
},
),
),
);
}
Stack workshopCard() {
return Stack(
clipBehavior: Clip.none,
children: [
Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage('assets/workshop_image.png'),
fit: BoxFit.cover,
),
),
),
Positioned.fill(
bottom: -100,
child: Align(
alignment: Alignment.bottomCenter,
child: Card(
margin: const EdgeInsets.all(5),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"Pottery Throwing Taster Class",
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(
height: 5,
),
Row(
children: [
SizedBox(
width: 100,
child: Column(
children: [
Row(
children: [
Icon(
Iconsax.location5,
size: 16,
color: Color(0xFF083AA9),
),
SizedBox(
width: 2,
),
Text(
"Honslow",
// style: TextStyle(fontSize: 8),
)
],
),
SizedBox(
height: 5,
),
Row(
children: [
Icon(
Iconsax.profile_2user,
size: 16,
color: Color(0xFF083AA9),
),
SizedBox(
width: 2,
),
Text("1 to 15")
],
),
SizedBox(
height: 5,
),
Row(
children: [
Icon(
Iconsax.tag_right,
size: 16,
color: Color(0xFF083AA9),
),
SizedBox(
width: 2,
),
Text("1 to 15")
],
),
SizedBox(
height: 5,
),
Row(
children: [
Icon(
Iconsax.star,
size: 16,
color: Color(0xFF083AA9),
),
SizedBox(
width: 2,
),
Text("5(37)")
],
),
],
),
),
ElevatedButton(
onPressed: () {},
style: TextButton.styleFrom(
minimumSize: const Size(70, 35),
maximumSize: const Size(70, 35),
backgroundColor: Color(0xFF0c3cac),
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20))),
child: Row(
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Text(
"Join",
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
),
Icon(size: 5, Icons.arrow_forward_ios),
Icon(
color: Color.fromARGB(255, 231, 227, 227),
size: 5,
Icons.arrow_forward_ios),
Icon(
color: Color.fromARGB(255, 181, 180, 180),
size: 5,
Icons.arrow_forward_ios),
],
)),
],
),
],
),
)),
),
)
],
);
}
}
Output page showing the widget overlap