Grid Examples

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Grid1(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
      ),
      itemBuilder: (BuildContext context, int index) {
        return Container(
          color: index.isEven
            ? Colors.amberAccent[100]
            : Colors.blueAccent[100],
          child: Center(child: Text('Item $index')),
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200,
      ),
      itemBuilder: (BuildContext context, int index) {
        return Container(
          color: index.isEven
            ? Colors.amberAccent[100]
            : Colors.blueAccent[100],
          child: Center(child: Text('Item $index')),
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 20,
      runSpacing: 20,
      children: <Widget>[
        Container(
          height: 100,
          width: 200,
          color: Colors.amberAccent[100],
          child: Center(child: Text('Item 1')),
        ),
        Container(
          height: 50,
          width: 70,
          color: Colors.blue[100],
          child: Center(child: Text('Item 2')),
        ),
        Container(
          height: 82,
          width: 300,
          color: Colors.pink[100],
          child: Center(child: Text('Item 3')),
        ),
        Container(
          height: 75,
          width: 90,
          color: Colors.greenAccent[100],
          child: Center(child: Text('Item 4')),
        ),
        Container(
          height: 250,
          width: 200,
          color: Colors.deepPurple[100],
          child: Center(child: Text('Item 5')),
        ),
      ]
    );
  }

}