Can someone explain why and how to fix this

return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Container(
          decoration: BoxDecoration(border: Border.all(color: Colors.white)),
          width: 60,
          height: 60,
          child: GridView.builder(
            shrinkWrap: true,
            itemCount: 16,
            physics: const AlwaysScrollableScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              childAspectRatio: 1.0,
            ),
            itemBuilder: (context, index) {
              return Container(
                decoration: BoxDecoration(
                    color: Colors.red, borderRadius: BorderRadius.circular(2)),
                margin: const EdgeInsets.all(1),
              );
            },
          ),
        ),
      ),
);

Im trying to fit a 4x4 matrix inside the container, and for some reason, it is automatically scrolling down, displaying only the first row. If I remove the physics, I can scroll up and the full grid is displayed.

This is how it looks:

and when removing the physics: const AlwaysScrollableScrollPhysics(), and scrolling manually up:

Can someone explain why and how to fix this

return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Container(
          decoration: BoxDecoration(border: Border.all(color: Colors.white)),
          width: 60,
          height: 60,
          child: GridView.builder(
            shrinkWrap: true,
            itemCount: 16,
            physics: const AlwaysScrollableScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              childAspectRatio: 1.0,
            ),
            itemBuilder: (context, index) {
              return Container(
                decoration: BoxDecoration(
                    color: Colors.red, borderRadius: BorderRadius.circular(2)),
                margin: const EdgeInsets.all(1),
              );
            },
          ),
        ),
      ),
);

Im trying to fit a 4x4 matrix inside the container, and for some reason, it is automatically scrolling down, displaying only the first row. If I remove the physics, I can scroll up and the full grid is displayed.

This is how it looks:

and when removing the physics: const AlwaysScrollableScrollPhysics(), and scrolling manually up:

• flutter

• Seems kinda ok for my side, browser, flutter 3.24.3 – Md. Yeasin Sheikh Commented Mar 3 at 6:44

1 Answer 1

There is a default padding on the GridView.builder widget, to override this you will have to add padding: EdgeInsets.zero as a parameter in GridView.builder, if you want don't want it to scroll add NeverScrollableScrollPhysics() as a physics parameter, Below is the code snippet

Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Container(
          decoration: BoxDecoration(border: Border.all(color: Colors.white)),
          width: 60,
          height: 60,
          child: GridView.builder(
            shrinkWrap: true,
            itemCount: 16,
            physics: const NeverScrollableScrollPhysics(), // The GridView will not scroll
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              childAspectRatio: 1.0,
            ),
            padding: EdgeInsets.zero, // To remove extra spacing 
            itemBuilder: (context, index) {
              return Container(
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(2),
                ),
                margin: const EdgeInsets.all(1),
              );
            },
          ),
        ),
      ),
    )