flutterlistviewscroll

Horizontal listview not scrolling on web but scrolling on mobile


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

Solution

  • 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.