Flutter right overflow by 220 pixel - flutter

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,
};
}