Horizontal ListWheelScrollView feature request

[dbohatyrov]

It's more a feature request than an issue, to get possibility of rotating ListWheelScrollView. Or if it is already possible update the docs.

ListView have property Axis scrollDirection which is controlling ListView orientation (vertical or horizontal). I would be happy to have same property on ListWheelScrollView

Steps to Reproduce

1. Build ListWheelScrollView.
2. Realize that Axis scrollDirection is missing
3. Try to rotate it with Transform.rotate
4. Get strange behaviour of Vertical finger movement and horizontal List movement

Logs

[√] Flutter (Channel stable, v1.0.0, on Microsoft Windows [Version 10.0.17758.1], locale ru-RU)
    • Flutter version 1.0.0 at C:\Users\denis\sdk\flutter
    • Framework revision 5391447fae (7 days ago), 2018-11-29 19:41:26 -0800
    • Engine revision 7375a0f414
    • Dart version 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)

[√] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    • Android SDK at C:\Users\denis\AppData\Local\Android\Sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • ANDROID_HOME = C:\Users\denis\AppData\Local\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)
    • All Android licenses accepted.

[√] Android Studio (version 3.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)

[√] VS Code (version 1.29.1)
    • VS Code at C:\Users\denis\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 2.21.1

[√] Connected device (1 available)
    • Mi A2 Lite • 4b334b3d0205 • android-arm64 • Android 8.1.0 (API 27)

[JasCodes]

@zoechi @goderbauer Any updates or any code snippet available to deal with this issue. Thx

[ReginFell]

Any news? Have the same issue, haven't found any good solutions so far

[JasCodes]

@ReginFell @goderbauer @zoechi

Heres my workaround. Please upvote.

https://stackoverflow.com/questions/52578569/how-to-make-listwheelscrollview-horizontal/57881655#57881655

[nishantsubedi]

Any Updates yet on this issue

[omri1100]

Any update?

[mohammadne]

update ????

[giorgio79]

This package works great https://pub.dev/packages/carousel_slider

[jameslester2004]

Would really appreciate this feature too!

[JasCodes]

@jameslester2004 There you go 😁
https://stackoverflow.com/questions/52578569/how-to-make-listwheelscrollview-horizontal/57881655#57881655

[jameslester2004]

Hey Jas, thanks for this. I had seen on Stack overflow.

It is ok. Would prefer a more comprehensive official version where we just need to add an scrollDirection property like list view, without needing to use builders.

I have it working. Am I doing something really stupid or does the list just keep scrolling either side, even if there is no widget to display?

Surely need to declare the item count somewhere?

Cheers

[JasCodes]

@jameslester2004 if you read the code, I am using not default constructor but useDelgate one cause I needed infinite builder for my use case. You can easily modify it and pass children to default constrcutor.

ListWheelScrollView.useDelegate

Refer both constructors here

https://api.flutter.dev/flutter/widgets/ListWheelScrollView-class.html

I will actually publish package actually with both contructors.

[jameslester2004]

Hey man, sorry you're absolutely right. I just got it going. Neat fix! Thanks.

[JasCodes]

Guys I have add package at https://pub.dev/packages/list_wheel_scroll_view_x

If someone finds it useful; please give the package a like and upvote it on stackoverflow

Thx

cc
@jameslester2004

[maheshmnj]

Here's a Naive Workaround using the existing ListWheelScrollView

The basic idea is to rotate the ListWheelScrollView using the RotatedBox. Using this approach in one of my apps

Demo Output with

• Total Items: 100
• initial Scroll Position: 50
  source: https://gist.github.com/maheshmnj/ceefe22821e0ca8783669a06ad9a9f0b

But I do still support this feature Request of having the direction api out of the box.

[codemicah]

Being able to change the scroll direction of a ListWheelScrollView is one really needed feature.

[aluxen]

Any update?

[rahmanrezaee]

copy this code and used it

code sample

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

    class ListWheelScrollViewX extends StatelessWidget {
      final Axis scrollDirection;
      final List<Widget>? children;
      final ScrollController? controller;
      final ScrollPhysics? physics;
      final double diameterRatio;
      final double perspective;
      final double offAxisFraction;
      final bool useMagnifier;
      final double magnification;
      final double overAndUnderCenterOpacity;
      final double itemExtent;
      final double squeeze;
      final ValueChanged<int>? onSelectedItemChanged;
      final bool renderChildrenOutsideViewport;
      final ListWheelChildDelegate? childDelegate;
      final Clip clipBehavior;
    
      const ListWheelScrollViewX({
        Key? key,
        this.scrollDirection = Axis.vertical,
        this.controller,
        this.physics,
        this.diameterRatio = RenderListWheelViewport.defaultDiameterRatio,
        this.perspective = RenderListWheelViewport.defaultPerspective,
        this.offAxisFraction = 0.0,
        this.useMagnifier = false,
        this.magnification = 1.0,
        this.overAndUnderCenterOpacity = 1.0,
        required this.itemExtent,
        this.squeeze = 1.0,
        this.onSelectedItemChanged,
        this.renderChildrenOutsideViewport = false,
        this.clipBehavior = Clip.hardEdge,
        required this.children,
      })  : childDelegate = null,
            super(key: key);
    
      const ListWheelScrollViewX.useDelegate({
        Key? key,
        this.scrollDirection = Axis.vertical,
        this.controller,
        this.physics,
        this.diameterRatio = RenderListWheelViewport.defaultDiameterRatio,
        this.perspective = RenderListWheelViewport.defaultPerspective,
        this.offAxisFraction = 0.0,
        this.useMagnifier = false,
        this.magnification = 1.0,
        this.overAndUnderCenterOpacity = 1.0,
        required this.itemExtent,
        this.squeeze = 1.0,
        this.onSelectedItemChanged,
        this.renderChildrenOutsideViewport = false,
        this.clipBehavior = Clip.hardEdge,
        required this.childDelegate,
      })  : children = null,
            super(key: key);
    
      @override
      Widget build(BuildContext context) {
        final _childDelegate = children != null
            ? ListWheelChildListDelegate(
                children: children!.map((child) {
                return RotatedBox(
                  quarterTurns: scrollDirection == Axis.horizontal ? 1 : 0,
                  child: child,
                );
              }).toList())
            : ListWheelChildBuilderDelegate(
                builder: (context, index) {
                  return RotatedBox(
                    quarterTurns: scrollDirection == Axis.horizontal ? 1 : 0,
                    child: childDelegate!.build(context, index),
                  );
                },
              );
    
        return RotatedBox(
          quarterTurns: scrollDirection == Axis.horizontal ? 3 : 0,
          child: ListWheelScrollView.useDelegate(
            controller: controller,
            physics: FixedExtentScrollPhysics(),
            diameterRatio: diameterRatio,
            perspective: perspective,
            offAxisFraction: offAxisFraction,
            useMagnifier: useMagnifier,
            magnification: magnification,
            overAndUnderCenterOpacity: overAndUnderCenterOpacity,
            itemExtent: itemExtent,
            squeeze: squeeze,
            onSelectedItemChanged: onSelectedItemChanged,
            renderChildrenOutsideViewport: renderChildrenOutsideViewport,
            clipBehavior: clipBehavior,
            childDelegate: _childDelegate,
          ),
        );
      }
    }

Example

    ListWheelScrollViewX(
        scrollDirection: Axis.horizontal,
        itemExtent: 120,
        children:...
    ),

Reference
list_wheel_scroll_view_x

changes:
convert to null safety

[JoDeveloper]

Guys I have add package at https://pub.dev/packages/list_wheel_scroll_view_x

If someone finds it useful; please give the package a like and upvote it on stackoverflow

Thx

cc @jameslester2004

null-safety version 👍🏼

https://pub.dev/packages/list_wheel_scroll_view_nls

[devberkay]

update please. FixedExtentScrollPhysics are still not available for horizontal ListViews.

[Peng-Qian]

come on team, 4 years already...😵