GridView_ListView

main.dart

import 'package:flutter/material.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 MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GridView_ListView'),
      ),
      body: Center(
          child: Column(
        children: [
          Expanded(
            child: GridView.count(
              primary: false,
              padding: const EdgeInsets.all(10),
              crossAxisSpacing: 2.0,
              mainAxisSpacing: 10.0,
              crossAxisCount: 2,
              childAspectRatio: 400 / 100,
              children: const [
                GridTest(),
                SizedBox(
                  height: 10,
                ),
                GridTest(),
                SizedBox(
                  height: 10,
                ),
                GridTest(),
                SizedBox(
                  height: 10,
                ),
                GridTest(),
                SizedBox(
                  height: 10,
                ),
                GridTest(),
                SizedBox(
                  height: 10,
                ),
                GridTest(),
                SizedBox(
                  height: 10,
                ),
                GridTest(),
                SizedBox(
                  height: 10,
                ),
                GridTest(),
                SizedBox(
                  height: 10,
                ),
                GridTest()
              ],
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Expanded(
              child: ListView(
            children: const [
              GridTest(),
              SizedBox(
                height: 10,
              ),
              GridTest(),
              SizedBox(
                height: 10,
              ),
              GridTest(),
              SizedBox(
                height: 10,
              ),
              GridTest(),
              SizedBox(
                height: 10,
              ),
              GridTest(),
              SizedBox(
                height: 10,
              ),
              GridTest(),
              SizedBox(
                height: 10,
              ),
              GridTest(),
              SizedBox(
                height: 10,
              ),
              GridTest(),
              SizedBox(
                height: 10,
              ),
              GridTest()
            ],
          )),
        ],
      )),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {},
      child: Container(
        padding: const EdgeInsets.all(5),
        decoration: BoxDecoration(
          color: const Color.fromRGBO(167, 194, 17, 0.80),
          border: Border.all(
              color: const Color.fromRGBO(243, 146, 0, 0.48), width: 2),
          borderRadius: BorderRadius.circular(10),
        ),
        child: const Row(
          children: [
            Icon(Icons.abc_rounded),
            SizedBox(
              width: 50,
            ),
            Text(
              'Vouge',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
            )
          ],
        ),
      ),
    );
  }
}