Wrap Widget

 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.blueGrey,
      ),
      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) {
    return Scaffold(
      drawer: const Drawer(),
      appBar: AppBar(
        title: const Text(
          "Flutter Wrap Widget",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      /*By default,direction of "Wrap" widget is horizontal.Wrap widget aligns the widgets in a horizontal and vertical manner
     If there is not enough space to fit the child,Wrap creates a new run adjacent to the existing children in the cross axis.*/

      body: Container(
        width: double.infinity, //so that it will occupy full width
        height: double.infinity,
        child: Wrap(
          direction: Axis.vertical,
          //direction: Axis.horizontal,
          //alignment: WrapAlignment.center,
          alignment: WrapAlignment.spaceEvenly,
          //alignment: WrapAlignment.spaceBetween,
          //alignment: WrapAlignment.spaceAround,
          spacing: 11,
          runSpacing: 11,
          //runSpacing also called crossSpacing
          children: [
            Container(
              width: 110,
              height: 110,
              color: Colors.blue,
            ),
            Container(
              width: 110,
              height: 110,
              color: Colors.red,
            ),
            Container(
              width: 110,
              height: 110,
              color: Colors.amber,
            ),
            Container(
              width: 110,
              height: 110,
              color: Colors.black,
            ),
            Container(
              width: 110,
              height: 110,
              color: Colors.green,
            ),
            Container(
              width: 110,
              height: 110,
              color: Colors.brown,
            ),
            Container(
              width: 110,
              height: 110,
              color: Colors.deepPurple,
            ),
            Container(
              width: 110,
              height: 110,
              color: Colors.pinkAccent,
            ),
            Container(
              width: 110,
              height: 110,
              color: Colors.lightGreen,
            ),
            Container(
              width: 110,
              height: 110,
              color: Colors.tealAccent,
            ),
            Container(
              width: 110,
              height: 110,
              color: Colors.purpleAccent,
            ),
          ],
        ),
      ),
    );
  }
}