`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),
          ),
          // ignore: prefer_const_constructors
          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") ], ), ), ], ), ); } }`

enter image description here

Right Overflow error is showing

CodePudding user response：

Wrap your Row with SingleChildScrollView

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

CodePudding user response：

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