flutter web - horizontal singlechildscrollview cannot scroll with mouse click and drag

Question

I want to scroll the item in the row with click and drag. when I tries to scroll though click and drag it does nothing..................................................................................................................

Container(
            height: 300,
        width: double.infinity,
        color: Colors.green,
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: List.generate(
                
                   services.length, (index) => GalleryCard(index: index)),
          ),
        ),
          )

This is the gallery card class:

class GalleryCard extends StatefulWidget {
  const GalleryCard({
    Key? key,
    required this.index,
  }) : super(key: key);

  final int index;

  @override
  _GalleryCardState createState() => _GalleryCardState();
}

class _GalleryCardState extends State<GalleryCard> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        SizedBox(
          height: 300,
          width: 340,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10.0),
            child: Image.asset(
              recentWorks[widget.index].image,
              fit: BoxFit.fill,
            ),
          ),
        ),
      ],
    );
  }
}

Answer 1

By using the below you can scroll through click and drag it, and even scroll with the mouse wheel

Use this Custom Class

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

class CustomScrollbarWithSingleChildScrollView extends StatelessWidget {
  final ScrollController controller;
  final Widget child;
  final Axis scrollDirection;

  const CustomScrollbarWithSingleChildScrollView(
      {required this.controller,
      required this.child,
      required this.scrollDirection,
      Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScrollConfiguration(
      behavior: MyCustomScrollBehavior(),
      child: Scrollbar(
        controller: controller,
        child: SingleChildScrollView(
          controller: controller,
          scrollDirection: scrollDirection,
          child: child,
        ),
      ),
    );
  }
}

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
        PointerDeviceKind.stylus,
        PointerDeviceKind.unknown,
      };
}

usage of the above widget class

CustomScrollbarWithSingleChildScrollView(
            controller: con,
            scrollDirection: Axis.horizontal,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: List.generate(
                  services.length, (index) => GalleryCard(index: index)),
            ),
          ),

Answer 2

initialize a TabController :

 ScrollController con = ScrollController();

Container(
        height: 300,
        width: double.infinity,
        color: Colors.green,
        child: Scrollbar(
               scrollbarOrientation: ScrollbarOrientation.top,
               controller:con,
               child:SingleChildScrollView(
                     controller : con,
                     scrollDirection: Axis.horizontal,
                     child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: List.generate(
                                  services.length, (index) => GalleryCard(index: index),
                            ),
                          ),
                        ),
                      ),
                    ),

working like a charm.

Answer 3

here is an example of what worked for me regarding doc

in main.dart I added this class

    class MyCustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
    PointerDeviceKind.stylus,
    PointerDeviceKind.unknown,
  };
}

then inside of "MaterialApp" add this

scrollBehavior: MyCustomScrollBehavior(),