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

Jeannettajeannette

can you please share GalleryCard code? – Shambles

Gallerycard code added – Jeannettajeannette

I copy your code without any changes and it is working fine – Shambles

it work for mobile but not work in web – Jeannettajeannette

Answer 1

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

Sneaking

Answer 2

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

Himes

Answer 3

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.

Enedina

This requires the user to click and drag on the scroll bar instead of scrolling by dragging items. – Celestinacelestine

you can use the InkWell widget to make what you want happen, check this package and copy-paste the code of the inkwell, link and replace the animation controller with your own scroll controller and do what ever you want with it. – Enedina