Flutter Gridview.builder is not visible

Question

import 'package:flutter/material.dart';

class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  final List<String> _wallpapers = [
    "wall-1.jpg",
    "wall-2.png",
    "wall-3.jpg",
    "wall-4.jpg",
    "wall-5.jpg",
    "wall-6.png",
    "wall-7.png",
    "wall-8.jpg"
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).backgroundColor,
      child: LayoutBuilder(builder: (context, constraints) {
        print("height:${constraints.maxHeight}");
        return SingleChildScrollView(
            child: ConstrainedBox(
          constraints: constraints,
          child: Column(
            children: [
              SizedBox(
                  height: constraints.maxHeight * 0.4,
                  width: constraints.maxWidth,
                  child: Container(
                    color: Colors.red,
                  )),
              const Divider(
                color: Colors.black,
              ),
              Expanded(
                child: GridView.builder(
                   physics: NeverScrollableScrollPhysics(),
                    itemCount: _wallpapers.length,
                    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                      maxCrossAxisExtent: 5,
                    ),
                    itemBuilder: (_, index) {
                      return Container(
                        height: constraints.maxHeight * 0.35,
                        width: constraints.maxWidth * 0.25,
                        margin: const EdgeInsets.all(20.0),
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: Image.asset(
                                  "assets/wallpaper/${_wallpapers[index]}",
                                ).image,
                                fit: BoxFit.cover)),
                      );
                    }),
              ),
            ],
          ),
        ));
      }),
    );
  }

I am implementing Gridview.builder in flutter web to changing the crossAxisCount with change in size of the window .I tried using the above code but the issue is the grid is not at all visible and the page is blank.

OR

Is there any other way to dynamically set the crossAxisCount with respect to the size?.

Answer 1

If you do not want to specify cross axis count you can use these widgets.

1. Wrap widget provided by the flutter framework iteself. Example:

 Container(
                width: MediaQuery.of(context).size.width,
                child: Wrap(
                  crossAxisAlignment: WrapCrossAlignment.start,
                  alignment: WrapAlignment.start,
                  children: List.generate(
                  20,
                    (childIndex) {
                    
                     return Container(height: 100 , width: 100);
                    },
                  ),
                ),

2.There is package called responsive_grid in which you do have to provide the cross axis count. It requires desiredItemWidth which determines how wide a child in grid view will be.
https://pub.dev/packages/responsive_grid

Here is a simple usage of it:

    return ResponsiveGridList(
      desiredItemWidth: _width * 0.3,
      children: List.generate(
        20
        (index) {

         return Container(height: _height*0.1,
                  color: Colors.red
                );
         
        },
      ),
    );