Flutter Gridview builder giving out useless white space

Question

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:

enter image description here

• Zhentao: try MediaQuery.removePadding
• Muteeb Rehman: @Zhentao where should i write that?
• Zhentao: i just wrote an example for you, hope that helps

Answer 1

Set the padding of the GridView to zero

GridView.builder(
// Add this line
 padding: EdgeInsets.zero,
 {...}
)

Answer 2

try MediaQuery.removePadding

MediaQuery.removePadding(
 context: context,
 removeTop: true,
 removeRight: true,
 removeLeft: true,
 removeBottom: true,
 child: GridView.builder(
 )
)

Answer 3

Try this

1. 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