Flutter right overflow by 220 pixel

Question

I have this error Flutter right overflow by 220 Pixel and Right Overflow error is showing.

My code :

import 'package:flutter/material.dart';
    class Category extends StatelessWidget {
    const Category({super.key});
    Widget CategoryCard(String imgUrl, String CategoryName) {
      return GestureDetector(
        onTap: () {},
        child: Container(
          margin: EdgeInsets.only(right: 16),
          child: Stack(
            children: [
              ClipRRect(borderRadius: BorderRadius.circular(6),child: Image.network(imgUrl,width: 120,height: 60,fit: BoxFit.cover,)),
              Container(alignment: Alignment.center,width: 120,height: 60,decoration: BoxDecoration(borderRadius: BorderRadius.circular(6),color: Color.fromARGB(135, 0, 0, 0),),
                child: Text(CategoryName,style: TextStyle(color: Colors.white, fontSize: 15),),
              )],),),);
    }        
   
    @override
    Widget build(BuildContext context) {
      return SingleChildScrollView(
        child: Column(
          children: [
            Padding(padding: const EdgeInsets.all(10),child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [CategoryCard("img1", "Technology"),CategoryCard("img2", "Technology"),CategoryCard("img3", "Technology"),CategoryCard("img4", "Technology")],
              ),),],),);}
    }

Screenshot of ui and error:

Answer 1

Wrap your Row with SingleChildScrollView

SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                // CategoryCard()