Horizontal listview not scrolling on web but scrolling on mobile

Question

After flutter 2.5 update listview is scrolling only on mobile platforms. It doesn't scroll when I open it on the web. It was working fine in the previous version. I tried the scroll physics but it didn't work. what do you suggest i do? sorry for my bad english.


          return SizedBox(
            height: 400,
            child: ListView.builder(
                physics: ClampingScrollPhysics(),
                scrollDirection: Axis.horizontal,
                // ignore: unnecessary_null_comparison
                itemCount: items == null ? 0 : items.length,
                itemBuilder: (context, index) {
                  return GestureDetector(
                      onTap: () {
                        LoginForm();
                      },
                      child: Container(
                        margin:
                            EdgeInsets.symmetric(horizontal: 20, vertical: 6),
                        child: SizedBox(
                          width: 400,
                          height: 50,
                          child: Stack(
                            fit: StackFit.expand,
                            children: <Widget>[
                              Container(
                                decoration: BoxDecoration(
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(20.0)),
                                    boxShadow: [
                                      BoxShadow(
                                          color: fromCssColor(
                                              items[index].color.toString()),
                                          // color: Colors.black38,
                                          offset: Offset(2.0, 2.0),
                                          blurRadius: 5.0,
                                          spreadRadius: 1.0)
                                    ]),
                              ),
                              ClipRRect(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(20.0)),
                                child: Image.asset(
                                  items[index].image.toString(),
                                  fit: BoxFit.cover,
                                ),
                              ),
                              Container(
                                decoration: BoxDecoration(
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(20.0)),
                                    gradient: LinearGradient(
                                        begin: Alignment.topCenter,
                                        end: Alignment.bottomCenter,
                                        colors: [
                                          Colors.transparent,
                                          Colors.black45
                                        ]))
                                    ),
                                  ],
                                ),
                              ),

try: `MaterialApp( scrollBehavior: MaterialScrollBehavior().copyWith( dragDevices: {PointerDeviceKind.mouse}, ), ...` — pskink, Sep 12 '21 at 19:17
Thanks. and can use ScrollConfiguration.of(context).copyWith(...) too — Ali Bagheri, Apr 02 '22 at 03:13

score 101 · Accepted Answer · edited Mar 02 '22 at 19:02

101

Flutter 2.5 Summary

ScrollBehaviors now allow or disallow drag scrolling from specified PointerDeviceKinds. ScrollBehavior.dragDevices, by default, allows scrolling widgets to be dragged by all PointerDeviceKinds except for PointerDeviceKind.mouse.

import 'package:flutter/material.dart';

// Set ScrollBehavior for an entire application.
MaterialApp(
  scrollBehavior: MyCustomScrollBehavior(),
  // ...
);

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

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

Reference to the official documentation.

edited Mar 02 '22 at 19:02

Philippe Fanaro

6,148
6
38
76

answered Sep 16 '21 at 03:48

Raine Dale Holgado

2,932
2
17
32

2

Thank you so much for this, I've been looking for a long time to the issue of horizontal scrolling by using Flutter for web development. – Aesreal Dec 17 '21 at 05:14
Is this supposed to be included exactly as you've written it here? I get "undefined name PointerDeviceKind". I also notice that the Flutter documentation page for PointerDeviceKind, which is linked at the bottom of the page you linked to, is a 404. https://master-api.flutter.dev/flutter/dart-ui/PointerDeviceKind-class.html – user3185563 Dec 30 '21 at 17:20
I am amazed. Thanks this worked. Chrome was not allowing horizontal scrolling for listview. – Golden Lion Mar 22 '22 at 19:56
1

Thanks, @Raine Dale Holgado Amazing it works on the web! – Zujaj Misbah Khan May 13 '22 at 10:58
Link for more information https://docs.flutter.dev/release/breaking-changes/default-scroll-behavior-drag – UN..D Jul 04 '22 at 07:46
It does work, I dont know why flutter doesnt make this default – Clode Morales Pampanga III Jun 04 '23 at 10:59

score 3 · Answer 2 · answered Jul 04 '22 at 07:58

If you want solution for specific Widget Try below

    class MyCustomScrollBehavior extends MaterialScrollBehavior {
      // Override behavior methods and getters like dragDevices
      @override
      Set<PointerDeviceKind> get dragDevices => { 
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
        // etc.
      };
    }
    
    // ScrollBehavior can be set for a specific widget.
    final ScrollController controller = ScrollController();
    ScrollConfiguration(
      behavior: MyCustomScrollBehavior(),
      child: ListView.builder(
        controller: controller,
        itemBuilder: (BuildContext context, int index) {
         return Text('Item $index');
        }
      ),
    );

more information flutter dev

Also works with normal ListView widgets (ie: doesn't have to be ListView.builder) — SpiRail, Nov 26 '22 at 22:03

Horizontal listview not scrolling on web but scrolling on mobile

2 Answers2

Flutter 2.5 Summary

Linked