responsive grid view builder with fixed item size

Question

how to make a responsive grid view builder with fixed item size in Flutter to be the same behavior as the GeForce Experience application I need the items to fill the remaining width and go to the second line if there is no enough width something like this

GIF Image

Answer 1

You can provide crossAxisCount based on screen width.

class TestGR extends StatelessWidget {
  const TestGR({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          final width = constraints.maxWidth;
          final height = constraints.maxHeight;
          final itemHeight = 200.0;
          final itemWidth = 100.0;

          final crossCount = (width / itemWidth).floor();

          return Center(
              child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: crossCount,
              childAspectRatio: itemWidth / itemHeight,
            ),
            itemBuilder: (context, index) {
              return Container(
                color: Colors.primaries[index % Colors.primaries.length],
                margin: const EdgeInsets.all(8),
                child: Center(
                  child: Text(
                    '$index',
                    style: const TextStyle(fontSize: 24),
                  ),
                ),
              );
            },
          ));
        },
      ),
    );
  }
}

Also you can use wrap(GridView is better)

class TestGR extends StatelessWidget {
  const TestGR({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          final width = constraints.maxWidth;
          final height = constraints.maxHeight;
          final itemHeiht = 200.0;
          final itemWidth = 100.0;

          return Center(
            child: SingleChildScrollView(
              child: Wrap(
                alignment: WrapAlignment.center,
                spacing: 10,
                crossAxisAlignment: WrapCrossAlignment.center,
                children: [
                  for (int i = 0; i < 100; i++)
                    Container(
                      width: itemWidth,
                      height: itemHeiht,
                      color: Colors.primaries[i % Colors.primaries.length],
                      child: Center(
                        child: Text(
                          "$i",
                          style: TextStyle(fontSize: 24),
                        ),
                      ),
                    ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}