SliverGrid
sample.packages.flutter.lib.src.rendering.sliver_grid.287.
Here is an example using the [mainAxisExtent] property. On a device with a screen width of 800.0, it creates a GridView with each tile with a width of 200.0 and a height of 150.0.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return GridView(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
mainAxisExtent: 150.0,
),
children: List.generate(20, (int i) {
return Builder(builder: (BuildContext context) {
return Text('$i');
});
}),
);
}
}
SHARE: