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

Malm

try: MaterialApp( scrollBehavior: MaterialScrollBehavior().copyWith( dragDevices: {PointerDeviceKind.mouse}, ), ... – Omaomaha

Thanks. and can use ScrollConfiguration.of(context).copyWith(...) too – Pentheas

Answer 1

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.

Cantor

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. master-api.flutter.dev/flutter/dart-ui/… – Forte

I am amazed. Thanks this worked. Chrome was not allowing horizontal scrolling for listview. – Caracul

Link for more information docs.flutter.dev/release/breaking-changes/… – Diacid

It does work, I dont know why flutter doesnt make this default – Economically

Answer 2

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

Diacid

Also works with normal ListView widgets (ie: doesn't have to be ListView.builder) – Lach

@Lach of course – Diacid

Answer 3

I was able to solve this issue by putting following code in my MaterialApp widget

  scrollBehavior: const MaterialScrollBehavior().copyWith(
    dragDevices: {PointerDeviceKind.mouse},
  ),

My code

return MaterialApp(
  scrollBehavior: const MaterialScrollBehavior().copyWith(
    dragDevices: {PointerDeviceKind.mouse},
  ),
  title: 'Flutter app',
  debugShowCheckedModeBanner: false,
  theme: ThemeData(useMaterial3: true),
  home: const SplashScreen(),
);

Oates

does this break mobile though? – Stereochemistry

@Stereochemistry This way would break mobile but the following code will ensure both work: scrollBehavior: ScrollConfiguration.of(context).copyWith( dragDevices: { PointerDeviceKind.touch, PointerDeviceKind.mouse, }, – Commiserate