I am trying to display 6 cards with gridview builder in flutter. 3 cards each row. i am successful to display the cards along with dymanic content of cards but what i am facing now is that gridview is giving out useless white above the cards which i didnt mention out anywhere and i dont know why it is doing so.
this is my code for grid view builder:
Padding(
padding: EdgeInsets.symmetric(
horizontal: screenWidth * 0.08,
),
child: Row(
children: [
Expanded(
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 16.0,
mainAxisSpacing: 16.0,
),
itemCount: items.length,
itemBuilder: (context, index) {
return Card(
color: Colors.white,
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
items[index]['image'],
width: screenWidth * 0.1,
height: screenHeight * 0.04,
fit: BoxFit.cover,
),
SizedBox(height: screenHeight * 0.01),
Text(
items[index]['text'],
style: GoogleFonts.poppins(
fontSize: screenWidth * 0.025,
fontWeight: FontWeight.bold,
color: AppColors.textSecondary,
),
),
],
),
);
},
),
),
],
),
),
this is my whole screen code in which this gridview builder is being used:
class SmallScreenLayout extends StatefulWidget {
const SmallScreenLayout({super.key});
@override
State<SmallScreenLayout> createState() => _SmallScreenLayoutState();
}
class _SmallScreenLayoutState extends State<SmallScreenLayout> {
@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
final screenWidth = mediaQuery.size.width;
final screenHeight = mediaQuery.size.height;
final List<Map<String, dynamic>> items = [
{'image': 'assets/images/Prayer.png', 'text': 'Prayer Time'},
{'image': 'assets/images/Beads.png', 'text': 'Tasbeeh'},
{'image': 'assets/images/qibla.png', 'text': 'Qibla'},
{'image': 'assets/images/hand.png', 'text': 'Dua'},
{'image': 'assets/images/Allah.png', 'text': 'Asma ul Husna'},
{'image': 'assets/images/Eid.png', 'text': 'Nabi Names'},
];
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
title: Center(
child: Text(
'Home',
style: GoogleFonts.poppins(
color: AppColors.textPrimary,
fontSize: 16,
fontWeight: FontWeight.w700,
),
),
),
backgroundColor: Colors.transparent,
elevation: 0,
),
backgroundColor: AppColors.background,
body: Column(
children: [
SizedBox(height: screenHeight * 0.04),
Row(
children: [
Expanded(
child: Container(
width: screenWidth,
height: screenHeight * 0.25,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/home_bg.png'),
fit: BoxFit.fill,
),
),
child: Center(
child: Row(
children: [
Padding(
padding: EdgeInsets.only(left: screenWidth * 0.04)),
Expanded(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Now",
style: GoogleFonts.poppins(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
),
),
Text(
"12:38 pm",
style: GoogleFonts.poppins(
fontSize: 24,
fontWeight: FontWeight.bold,
color: AppColors.textPrimary,
),
),
Text(
"Fri 25-02-25",
style: GoogleFonts.poppins(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
),
),
],
),
),
),
Expanded(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
"Upcoming prayer",
style: GoogleFonts.poppins(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
),
),
Text(
"DHUHR",
style: GoogleFonts.poppins(
fontSize: 24,
fontWeight: FontWeight.bold,
color: AppColors.textPrimary,
),
),
],
),
),
),
Padding(
padding:
EdgeInsets.only(right: screenWidth * 0.04)),
],
),
),
),
),
],
),
Padding(
padding: EdgeInsets.symmetric(horizontal: screenWidth * 0.07),
child: Row(
children: [
Expanded(
child: Container(
height: screenHeight * 0.07,
child: Card(
color: AppColors.homeayatcardcolor,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32),
),
child: Row(
children: [
Icon(Icons.search),
],
),
),
),
),
],
),
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: screenWidth * 0.08,
),
child: Row(
children: [
Expanded(
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 16.0,
mainAxisSpacing: 16.0,
),
itemCount: items.length,
itemBuilder: (context, index) {
return Card(
color: Colors.white,
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
items[index]['image'],
width: screenWidth * 0.1,
height: screenHeight * 0.04,
fit: BoxFit.cover,
),
SizedBox(height: screenHeight * 0.01),
Text(
items[index]['text'],
style: GoogleFonts.poppins(
fontSize: screenWidth * 0.025,
fontWeight: FontWeight.bold,
color: AppColors.textSecondary,
),
),
],
),
);
},
),
),
],
),
),
Expanded(child: Container()), // Spacer
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: screenWidth * 0.07),
height: screenHeight * 0.2,
child: Card(
color: AppColors.homeayatcardcolor,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(32),
bottom: Radius.circular(0),
),
),
child: Padding(
padding: EdgeInsets.only(
left: screenWidth * 0.02,
right: screenWidth * 0.02,
top: screenHeight * 0.02),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"Verse of the day:",
style: GoogleFonts.poppins(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.black,
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"Surah Taha, verse 46",
style: GoogleFonts.poppins(
fontSize: 13,
fontWeight: FontWeight.normal,
color: Colors.black,
),
)
],
),
SizedBox(
height: screenHeight * 0.02,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"قَالَ لَا تَخَافَآ ۖ إِنَّنِى مَعَكُمَآ أَسْمَعُ وَأَرَىٰ",
style: GoogleFonts.notoNaskhArabic(
fontSize: screenHeight * 0.02,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(
child: Container(
child: Text(
"ڈرو مت، بے شک میں تمہارے ساتھ ہوں، سنتا بھی ہوں اور دیکھتا بھی ہوں",
style: GoogleFonts.notoNaskhArabic(
fontSize: screenHeight * 0.016,
fontWeight: FontWeight.normal,
color: Colors.black,
),
maxLines: 3, // Allow up to 3 lines
overflow: TextOverflow
.ellipsis, // Add ellipsis if text exceeds maxLines
textAlign: TextAlign
.right, // Align text to the right for Arabic
),
),
),
],
),
],
),
),
),
),
),
],
),
],
),
);
}
}
here isthe screen shots:
I am trying to display 6 cards with gridview builder in flutter. 3 cards each row. i am successful to display the cards along with dymanic content of cards but what i am facing now is that gridview is giving out useless white above the cards which i didnt mention out anywhere and i dont know why it is doing so.
this is my code for grid view builder:
Padding(
padding: EdgeInsets.symmetric(
horizontal: screenWidth * 0.08,
),
child: Row(
children: [
Expanded(
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 16.0,
mainAxisSpacing: 16.0,
),
itemCount: items.length,
itemBuilder: (context, index) {
return Card(
color: Colors.white,
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
items[index]['image'],
width: screenWidth * 0.1,
height: screenHeight * 0.04,
fit: BoxFit.cover,
),
SizedBox(height: screenHeight * 0.01),
Text(
items[index]['text'],
style: GoogleFonts.poppins(
fontSize: screenWidth * 0.025,
fontWeight: FontWeight.bold,
color: AppColors.textSecondary,
),
),
],
),
);
},
),
),
],
),
),
this is my whole screen code in which this gridview builder is being used:
class SmallScreenLayout extends StatefulWidget {
const SmallScreenLayout({super.key});
@override
State<SmallScreenLayout> createState() => _SmallScreenLayoutState();
}
class _SmallScreenLayoutState extends State<SmallScreenLayout> {
@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
final screenWidth = mediaQuery.size.width;
final screenHeight = mediaQuery.size.height;
final List<Map<String, dynamic>> items = [
{'image': 'assets/images/Prayer.png', 'text': 'Prayer Time'},
{'image': 'assets/images/Beads.png', 'text': 'Tasbeeh'},
{'image': 'assets/images/qibla.png', 'text': 'Qibla'},
{'image': 'assets/images/hand.png', 'text': 'Dua'},
{'image': 'assets/images/Allah.png', 'text': 'Asma ul Husna'},
{'image': 'assets/images/Eid.png', 'text': 'Nabi Names'},
];
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
title: Center(
child: Text(
'Home',
style: GoogleFonts.poppins(
color: AppColors.textPrimary,
fontSize: 16,
fontWeight: FontWeight.w700,
),
),
),
backgroundColor: Colors.transparent,
elevation: 0,
),
backgroundColor: AppColors.background,
body: Column(
children: [
SizedBox(height: screenHeight * 0.04),
Row(
children: [
Expanded(
child: Container(
width: screenWidth,
height: screenHeight * 0.25,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/home_bg.png'),
fit: BoxFit.fill,
),
),
child: Center(
child: Row(
children: [
Padding(
padding: EdgeInsets.only(left: screenWidth * 0.04)),
Expanded(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Now",
style: GoogleFonts.poppins(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
),
),
Text(
"12:38 pm",
style: GoogleFonts.poppins(
fontSize: 24,
fontWeight: FontWeight.bold,
color: AppColors.textPrimary,
),
),
Text(
"Fri 25-02-25",
style: GoogleFonts.poppins(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
),
),
],
),
),
),
Expanded(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
"Upcoming prayer",
style: GoogleFonts.poppins(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
),
),
Text(
"DHUHR",
style: GoogleFonts.poppins(
fontSize: 24,
fontWeight: FontWeight.bold,
color: AppColors.textPrimary,
),
),
],
),
),
),
Padding(
padding:
EdgeInsets.only(right: screenWidth * 0.04)),
],
),
),
),
),
],
),
Padding(
padding: EdgeInsets.symmetric(horizontal: screenWidth * 0.07),
child: Row(
children: [
Expanded(
child: Container(
height: screenHeight * 0.07,
child: Card(
color: AppColors.homeayatcardcolor,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32),
),
child: Row(
children: [
Icon(Icons.search),
],
),
),
),
),
],
),
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: screenWidth * 0.08,
),
child: Row(
children: [
Expanded(
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 16.0,
mainAxisSpacing: 16.0,
),
itemCount: items.length,
itemBuilder: (context, index) {
return Card(
color: Colors.white,
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
items[index]['image'],
width: screenWidth * 0.1,
height: screenHeight * 0.04,
fit: BoxFit.cover,
),
SizedBox(height: screenHeight * 0.01),
Text(
items[index]['text'],
style: GoogleFonts.poppins(
fontSize: screenWidth * 0.025,
fontWeight: FontWeight.bold,
color: AppColors.textSecondary,
),
),
],
),
);
},
),
),
],
),
),
Expanded(child: Container()), // Spacer
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: screenWidth * 0.07),
height: screenHeight * 0.2,
child: Card(
color: AppColors.homeayatcardcolor,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(32),
bottom: Radius.circular(0),
),
),
child: Padding(
padding: EdgeInsets.only(
left: screenWidth * 0.02,
right: screenWidth * 0.02,
top: screenHeight * 0.02),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"Verse of the day:",
style: GoogleFonts.poppins(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.black,
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"Surah Taha, verse 46",
style: GoogleFonts.poppins(
fontSize: 13,
fontWeight: FontWeight.normal,
color: Colors.black,
),
)
],
),
SizedBox(
height: screenHeight * 0.02,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"قَالَ لَا تَخَافَآ ۖ إِنَّنِى مَعَكُمَآ أَسْمَعُ وَأَرَىٰ",
style: GoogleFonts.notoNaskhArabic(
fontSize: screenHeight * 0.02,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(
child: Container(
child: Text(
"ڈرو مت، بے شک میں تمہارے ساتھ ہوں، سنتا بھی ہوں اور دیکھتا بھی ہوں",
style: GoogleFonts.notoNaskhArabic(
fontSize: screenHeight * 0.016,
fontWeight: FontWeight.normal,
color: Colors.black,
),
maxLines: 3, // Allow up to 3 lines
overflow: TextOverflow
.ellipsis, // Add ellipsis if text exceeds maxLines
textAlign: TextAlign
.right, // Align text to the right for Arabic
),
),
),
],
),
],
),
),
),
),
),
],
),
],
),
);
}
}
here isthe screen shots:
Share Improve this question asked Mar 13 at 2:15 Muteeb RehmanMuteeb Rehman 811 silver badge11 bronze badges 3 |3 Answers
Reset to default 1Set the padding of the GridView to zero
GridView.builder(
// Add this line
padding: EdgeInsets.zero,
{...}
)
try MediaQuery.removePadding
MediaQuery.removePadding(
context: context,
removeTop: true,
removeRight: true,
removeLeft: true,
removeBottom: true,
child: GridView.builder(
)
)
Try this
- Set Explicit Padding to Zero for GridView
Padding(
padding: EdgeInsets.symmetric(
horizontal: screenWidth * 0.08,
),
child: Row(
children: [
Expanded(
child: GridView.builder(
padding: EdgeInsets.zero, // Add this
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 16.0,
mainAxisSpacing: 16.0,
),
itemCount: items.length,
itemBuilder: (context, index) {
// card code remains unchanged
},
),
),
],
),
),
Simplest solution if it is works
MediaQuery.removePadding– Zhentao Commented Mar 13 at 3:03