GridView practice

 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: "Flutter App",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: FlutterApp(),
    );
  }
}

/// Three main Option in GridView : count, extent, builder
/// crossAxisCount is mandatory in GridView.count

class FlutterApp extends StatelessWidget {
  FlutterApp({super.key});

  var arrColors = [Colors.pinkAccent, Colors.orange, Colors.purple, Colors.teal, Colors.yellow, Colors.deepPurple,
                    Colors.grey, Colors.lightBlueAccent, Colors.lime, Colors.tealAccent, Colors.brown, Colors.cyan,
                    Colors.deepOrange, Colors.deepPurple, Colors.green,];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GridView"),
      ),
      body: Column(
        children: [

          ///   Usage of GridView.builder
          Expanded(   //"GridView" must be wrapped with "Expanded" in mandatory situation
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: GridView.builder(
                itemBuilder: (context, index) {
                  return Container(color: arrColors[index],);
                },
                itemCount: arrColors.length,
                gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 200,
                  crossAxisSpacing: 11,
                  mainAxisSpacing: 11,
                ),
                scrollDirection: Axis.horizontal,
              ),
            ),
          ),

          const Divider(thickness: 3, color: Colors.black,),

          ///   Usage of "GridView.count"
          Expanded(        //suggested to wrap "GridView" widget by using "Expanded"
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: GridView.count(crossAxisCount: 2, //Column count will be considered
                crossAxisSpacing: 11,
                mainAxisSpacing: 11,
                children: [
                  Container(color: arrColors[0],),
                  Container(color: arrColors[1],),
                  Container(color: arrColors[2],),
                  Container(color: arrColors[3],),
                  Container(color: arrColors[4],),
                  Container(color: arrColors[5],),
                  Container(color: arrColors[6],),
                  Container(color: arrColors[7],),
                  Container(color: arrColors[8],),
                  Container(color: arrColors[9],),
                  Container(color: arrColors[10],),
                  Container(color: arrColors[11],),
                  Container(color: arrColors[12],),
                  Container(color: arrColors[13],),
                  Container(color: arrColors[14],),
                ],
              ),
            ),
          ),

          const Divider(thickness: 3, color: Colors.black,),

          ///   Usage of "GridView.extent"
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: GridView.extent(
                maxCrossAxisExtent: 150,
              crossAxisSpacing: 11,
              mainAxisSpacing: 11,
              children: [
                Container(color: arrColors[0],),
                Container(color: arrColors[1],),
                Container(color: arrColors[2],),
                Container(color: arrColors[3],),
                Container(color: arrColors[4],),
                Container(color: arrColors[5],),
                Container(color: arrColors[6],),
                Container(color: arrColors[7],),
                Container(color: arrColors[8],),
                Container(color: arrColors[9],),
                Container(color: arrColors[10],),
                Container(color: arrColors[11],),
                Container(color: arrColors[12],),
                Container(color: arrColors[13],),
                Container(color: arrColors[14],),
              ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

///   Making GridView without Array
// class FlutterApp extends StatelessWidget {
//   const FlutterApp({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: const Text("GridView"),
//       ),
//       body: GridView.count(
//         crossAxisCount: 2,
//         children: [
//           Padding(
//             padding: const EdgeInsets.all(16.0),
//             child: Container(color: Colors.deepOrange,),
//           ),
//           Padding(
//             padding: const EdgeInsets.all(16.0),
//             child: Container(color: Colors.deepPurple,),
//           ),
//           Padding(
//             padding: const EdgeInsets.all(16.0),
//             child: Container(color: Colors.grey,),
//           ),
//           Padding(
//             padding: const EdgeInsets.all(16.0),
//             child: Container(color: Colors.green,),
//           ),
//           Padding(
//             padding: const EdgeInsets.all(16.0),
//             child: Container(color: Colors.lime,),
//           ),
//           Padding(
//             padding: const EdgeInsets.all(16.0),
//             child: Container(color: Colors.pinkAccent,),
//           ),
//           Padding(
//             padding: const EdgeInsets.all(16.0),
//             child: Container(color: Colors.purple,),
//           ),
//           Padding(
//             padding: const EdgeInsets.all(16.0),
//             child: Container(color: Colors.teal,),
//           ),
//           Padding(
//             padding: const EdgeInsets.all(16.0),
//             child: Container(color: Colors.amber,),
//           ),
//         ],
//       ),
//     );
//   }
// }