Wrap Widget

In the lesson for Rows, when there was an overflow, an error appeared with a yellow-black stripped line rendering to indicate so. And we also realized, one of the ways to solve that was to use a Wrap widget.
In this lesson, that's what we'll definitely do, build using the Wrap widget.

Let's start by building a Stateless widget that will be built into a List of widgets that will render in a Wrap. This widget, we'll call it Custom.

class Custom extends StatelessWidget {
  final int index;
  const Custom({super.key, required this.index});

  @override
  Widget build(BuildContext context) {
    return Container(
        height: MediaQuery.of(context).size.height * 0.2,
        width: MediaQuery.of(context).size.width * 0.48,
        color: Colors.red,
        child: Text("Content : $index"));
  }
}

Building list of widgets using the created Widget, the codebase will be:

Note: Create the variable, containers, in a global scope

final containers = List<Widget>.generate(5, 
    (index) {
    return Custom(index: index);
});

Now, rendering the list of widgets in a Wrap widget returned by a stateless Widget, the resulting final part of the codebase becomes:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
      debugShowCheckedModeBanner: false, 
      home: MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Material(
          child: Wrap(
        spacing: 8.0, // gap between adjacent chips
        runSpacing: 4.0,
        children: containers,
      )),
    );
  }
}