GridView mit Mindestbreite

mygridview.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GridView mit Mindestbreite',
      home: Scaffold(
        appBar: AppBar(title: Text('Dynamische GridView')),
        body: LayoutBuilder(
          builder: (context, constraints) {
            // Mindestbreite für das Grid
            double minGridWidth = 300;
            double availableWidth = constraints.maxWidth;

            // Breite, die tatsächlich verwendet wird (mind. 300)
            double gridWidth = availableWidth < minGridWidth
                ? minGridWidth
                : availableWidth;

            // Zellenbreite
            double itemWidth = 150;
            int crossAxisCount = (gridWidth / itemWidth).floor();

            return Center(
              child: Container(
                width: gridWidth,
                child: GridView.count(
                  crossAxisCount: crossAxisCount,
                  shrinkWrap: true,
                  physics: BouncingScrollPhysics(),
                  crossAxisSpacing: 8,
                  mainAxisSpacing: 8,
                  padding: const EdgeInsets.all(16),
                  children: List.generate(12, (index) {
                    return Container(
                      decoration: BoxDecoration(
                        color: Colors.teal[100 * ((index % 8) + 1)],
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Center(
                        child: Text(
                          'Item $index',
                          style: TextStyle(fontSize: 16),
                        ),
                      ),
                    );
                  }),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}