GridView with extent height example

gridview_extent.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          // This is the theme of your application.
          //
          // Try running your application with "flutter run". You'll see the
          // application has a blue toolbar. Then, without quitting the app, try
          // changing the primarySwatch below to Colors.green and then invoke
          // "hot reload" (press "r" in the console where you ran "flutter run",
          // or simply save your changes to "hot reload" in a Flutter IDE).
          // Notice that the counter didn't reset back to zero; the application
          // is not restarted.
          primarySwatch: Colors.blue,
        ),
        home: HomeView2());
  }
}

class HomeView extends StatefulWidget {
  const HomeView({Key key}) : super(key: key);

  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: LayoutBuilder(
        builder: (_, BoxConstraints constraints) {
          final crossGap = 20.0;
          final countPerRow = 4;
          final itemWidth =
              (constraints.maxWidth - ((countPerRow - 1) * crossGap)) /
                  countPerRow;
          final maxHeight = 64.0;

          return CustomScrollView(
            slivers: <Widget>[
              SliverGrid(
                gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: itemWidth,
                  mainAxisSpacing: 10.0,
                  crossAxisSpacing: crossGap,
                  childAspectRatio: itemWidth / maxHeight,
                ),
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Column(
                      children: <Widget>[
                        FlutterLogo(),
                        Text(
                          index % 2 == 0 ? 'asdasd\n ahsd' : 'asdasd',
                          maxLines: 2,
                        ),
                      ],
                    );
                  },
                  childCount: 20,
                ),
              )
            ],
          );
        },
      ),
    ));
  }
}

class HomeView2 extends StatefulWidget {
  const HomeView2({Key key}) : super(key: key);

  static const String routeName = '';

  @override
  _HomeView2State createState() => _HomeView2State();
}

class _HomeView2State extends State<HomeView2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              final itemCount = 10;
              final crossGap = 10.0;
              final mainGap = 10.0;
              final countPerRow = 4;
              final itemWidth =
                  (constraints.maxWidth - ((countPerRow - 1) * crossGap)) /
                      countPerRow;
              final maxHeight = 64.0;
              final rows = (itemCount / countPerRow).ceilToDouble();
              final containerHeight =
                  (rows * maxHeight) + ((rows - 1) * mainGap);

              return SizedBox(
                height: containerHeight,
                child: GridView.builder(
                    primary: false,
                    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                      maxCrossAxisExtent: itemWidth,
                      mainAxisSpacing: mainGap,
                      crossAxisSpacing: crossGap,
                      childAspectRatio: itemWidth / maxHeight,
                    ),
                    itemCount: 10,
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                        color: Colors.red,
                        child: Column(
                          children: <Widget>[
                            FlutterLogo(),
                            Text(
                              index % 2 == 0 ? 'asdasd\n ahsd' : 'asdasd',
                              maxLines: 2,
                            ),
                          ],
                        ),
                      );
                    }),
              );
            },
          )
        ],
      ),
    );
  }
}