Flutter Grid view leaves unwanted spaces between items (vertically and horizontally)

Question

In my application, I set crossAxisCount to 7 using GridView, but I see that it draws white lines while drawing boxes on the screen. I tried many methods but could not solve this problem.

 GridView.count(
   crossAxisCount: 7,
   shrinkWrap: true,
   physics: const NeverScrollableScrollPhysics(),
   padding: EdgeInsets.zero,
   children: List.generate(
     150,
     (index) {
       return Container(
         color:Colors.black,
         child: Center(child: Text("text", style: TextStyle(color: Colors.white))),
       );
     },
   ),
 );

user_12349734 · Answer

As a workaround, you can wrap your GridView with a Container with setting the color to the same as the Container above the Text widget:

import 'package:flutter/material.dart';

class MyGridView extends StatelessWidget {
  const MyGridView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: GridView.count(
        crossAxisCount: 7,
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        padding: EdgeInsets.zero,
        children: List.generate(
          150,
          (index) {
            return Container(
              color: Colors.blue,
              child: Center(
                  child: Text("text", style: TextStyle(color: Colors.white))),
            );
          },
        ),
      ),
    );
  }
}

Result:

Flutter Grid view leaves unwanted spaces between items (vertically and horizontally)

1 Answers