GridView simple

 import "package:flutter/material.dart";

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Hello",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.brown,
      ),
      home: const FlutterApp(),
    );
  }
}

class FlutterApp extends StatefulWidget {
  const FlutterApp({super.key});

  @override
  State<StatefulWidget> createState() {
    return FlutterState();
  }
}

class FlutterState extends State<FlutterApp> {
  @override
  Widget build(BuildContext context) {
    var arrColors = [
      Colors.brown,
      Colors.green,
      Colors.blueGrey,
      Colors.blue,
      Colors.pink,
      Colors.purpleAccent,
      Colors.teal,
      Colors.amberAccent
    ];
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Hello Flutter GridView",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: GridView.builder(
        itemBuilder: (context, index) {
          return Container(
            color: arrColors[index],
          );
        },
        /*itemCount: arrColors.length, gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 11,
          mainAxisSpacing: 11,),*/

        itemCount: arrColors.length,
        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 100,
          crossAxisSpacing: 11,
          mainAxisSpacing: 11,
        ),
      ),

      /*Column(
        children: [
          Container(
            height: 200,
            child: GridView.count(
              //shrinkWrap: true,
              crossAxisCount: 4,
              crossAxisSpacing: 11,
              mainAxisSpacing: 11,
              children: [
                Container(color: Colors.brown, child: const Center(child: Text("1", style: TextStyle(color: Colors.white, fontSize: 50)),)),
                Container(color: Colors.green, child: const Center(child: Text("2", style: TextStyle(color: Colors.white, fontSize: 50))),),
                Container(color: Colors.blueGrey, child: const Center(child: Text("3", style: TextStyle(color: Colors.white, fontSize: 50)))),
                Container(color: Colors.blue, child: const Center(child: Text("4", style: TextStyle(color: Colors.white, fontSize: 50)))),
                Container(color: Colors.pink, child: const Center(child: Text("5", style: TextStyle(color: Colors.white, fontSize: 50)))),
                Container(color: Colors.purpleAccent, child: const Center(child: Text("6", style: TextStyle(color: Colors.white, fontSize: 50)))),
                Container(color: Colors.teal, child: const Center(child: Text("7", style: TextStyle(color: Colors.white, fontSize: 50)))),
                Container(color: Colors.amberAccent, child: Center(child: Text("8", style: TextStyle(color: Colors.white, fontSize: 50)))),
                //Container(color: Colors.purpleAccent),
                //Container(color: Colors.black),
              ],
            ),
          ),

          Container(
            height: 100,
          ),

          Container(
            height: 200,
            child: GridView.extent(
              maxCrossAxisExtent: 100,
              crossAxisSpacing: 11,
              mainAxisSpacing: 11,
            children: [
              Container(color: Colors.brown, child: const Center(child: Text("9", style: TextStyle(color: Colors.white, fontSize: 50)),)),
              Container(color: Colors.green, child: const Center(child: Text("10", style: TextStyle(color: Colors.white, fontSize: 50)),)),
              Container(color: Colors.blueGrey, child: const Center(child: Text("11", style: TextStyle(color: Colors.white, fontSize: 50)),)),
              Container(color: Colors.blue, child: const Center(child: Text("12", style: TextStyle(color: Colors.white, fontSize: 50)),)),
              Container(color: Colors.pink, child: const Center(child: Text("13", style: TextStyle(color: Colors.white, fontSize: 50)),)),
              Container(color: Colors.purpleAccent, child: const Center(child: Text("14", style: TextStyle(color: Colors.white, fontSize: 50)),)),
              Container(color: Colors.teal, child: const Center(child: Text("15", style: TextStyle(color: Colors.white, fontSize: 50)),)),
              Container(color: Colors.amberAccent, child: const Center(child: Text("16", style: TextStyle(color: Colors.white, fontSize: 50)),)),
              //Container(color: Colors.purpleAccent),
              //Container(color: Colors.black),
            ],
            ),
          ),
        ],
      ),*/
    );
  }
}