LukesSimpleGrid

main.dart

// https://x.com/luke_pighetti/status/1962682748776087930

import 'package:flutter/material.dart';

class SimpleGrid extends StatelessWidget {
  const SimpleGrid({
    super.key,
    required this.gap,
    required this.columns,
    required this.children,
  });

  final double gap;
  final int columns;
  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final paintableWidth = constraints.maxWidth - gap * (columns - 1);

        return Wrap(
          spacing: gap,
          runSpacing: gap,
          children: [
            for (final x in children)
              SizedBox(width: paintableWidth / columns, child: x),
          ],
        );
      },
    );
  }
}

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SimpleGrid Example'),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: SimpleGrid(
              gap: 10.0,
              columns: 3,
              children: List.generate(
                12, // More than 10 items to ensure multiple rows
                (index) => Container(
                  height: 100,
                  color: Colors.primaries[index % Colors.primaries.length],
                  alignment: Alignment.center,
                  child: Text(
                    'Item $index',
                    style: const TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}