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()

Answer 2

I modify your code and solved it ;)

first import below lines:

import 'dart:ui';
import 'package:flutter/material.dart';

then using Category and AppScrollBehavior class :

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),
              ),
              // ignore: prefer_const_constructors
              child: Text(
                CategoryName,
                style: TextStyle(color: Colors.white, fontSize: 15),
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ScrollConfiguration(
          behavior: AppScrollBehavior(),
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Padding(
              padding: const EdgeInsets.all(10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  CategoryCard("https://avatars.githubusercontent.com/u/46590079?v=4", "Technology"),
                  CategoryCard("https://avatars.githubusercontent.com/u/46590079?v=4", "Technology"),
                  CategoryCard("https://avatars.githubusercontent.com/u/46590079?v=4", "Technology"),
                  CategoryCard("https://avatars.githubusercontent.com/u/46590079?v=4", "Technology")
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

// if using flutter web need below class for enable scrolling
class AppScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };
}