GridView List Generate

 import "package:flutter/material.dart";

void main()
{
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "GridView",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.cyan,
      ),
      home: GridDemo(),
    );
  }
}
class GridDemo extends StatefulWidget {
  GridDemo({super.key});

  @override
  State<GridDemo> createState()
  {
    return GridDemoState();
  }
}
class GridDemoState extends State<GridDemo> {

  var arrColors = ["Yellow", "Pink", "Black", "White", "Orange", "Teal", "Blue", "Green", "LightBlue",
                    "Dark Black", "cyan", "Purple", "deepPurple"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GridView List Generate"),
        centerTitle: true,
      ),
      /// GridView.count(){}
      // body: Center(
      //   child: Padding(
      //     padding: const EdgeInsets.all(8.0),
      //     child: GridView.count(
      //       // scrollDirection: Axis.horizontal,
      //       shrinkWrap: true,
      //       mainAxisSpacing: 11.0,
      //       crossAxisSpacing: 11.0,
      //       crossAxisCount: 2,
      //       children: List.generate(50, (index) {
      //         return Card(
      //           child: Center(
      //             child: Column(
      //               children: [
      //                 Container(
      //                   width: 100.0,
      //                   height: 100.0,
      //                   child: Image.asset("assets/images/login_screen_image.png"),
      //                 ),
      //                 Text("Item $index", style: Theme.of(context).textTheme.headlineSmall),
      //               ],
      //             ),
      //           ),
      //         );
      //       },),
      //     ),
      //   ),
      // ),

      /// GridView.builder(){}
      body: GridView.builder(
        itemBuilder: (context, index) {
          return Card(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset("assets/images/Login_screen_image_3.png"),
                  Text(arrColors[index],
                    style: const TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
          );
        },
        shrinkWrap: true,
        padding: const EdgeInsets.all(8.0),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        itemCount: arrColors.length,
      ),
    );
  }
}

//If you do not set the shrinkWrap property, your ListView will be as big as its parent.
// If you set it to true, the list will wrap its content and be as big as its children allow it to be.
//
// Every ScrollView (ListView, GridView, CustomScrollView) have a shrinkWrap property for
// determining the size of scrollDirection.
// So ScrollView’s scrollDirection can have 02 sizes.
// Same size as parent size.
// Same size as content size (All children size).
// If ScrollView’s shrinkWrap: false, Then ScrollView’s scrollDirection size is the same size
// as the parent size.
//
// If the ScrollView’s shrinkWrap: true, Then ScrollView’s scrollDirection size is the same size
// as Content size All children size