How to make ListWheelScrollView horizontal

Question

I Am trying to have a horizontal ListView Widget that magnifies the center items. I tried using the normal ListView but I couldn't get the center items to magnify. Then while searching the flutter docs I came across ListWheelScrollView but unfortunately, it doesn't seem to support horizontal children layout. So basically am looking to create a horizontal ListView with center items magnification. I'd appreciate it if anyone can at least point me in the right direction. Thanks

Answer 1

Edit: I have published package based on this.

pub.dev/packages/list_wheel_scroll_view_x

Here's my workaround.

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

class ListWheelScrollViewX extends StatelessWidget {
  final Widget Function(BuildContext, int) builder;
  final Axis scrollDirection;
  final FixedExtentScrollController controller;
  final double itemExtent;
  final double diameterRatio;
  final void Function(int) onSelectedItemChanged;
  const ListWheelScrollViewX({
    Key key,
    @required this.builder,
    @required this.itemExtent,
    this.controller,
    this.onSelectedItemChanged,
    this.scrollDirection = Axis.vertical,
    this.diameterRatio = 100000,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RotatedBox(
      quarterTurns: scrollDirection == Axis.horizontal ? 3 : 0,
      child: ListWheelScrollView.useDelegate(
        onSelectedItemChanged: onSelectedItemChanged,
        controller: controller,
        itemExtent: itemExtent,
        diameterRatio: diameterRatio,
        physics: FixedExtentScrollPhysics(),
        childDelegate: ListWheelChildBuilderDelegate(
          builder: (context, index) {
            return RotatedBox(
              quarterTurns: scrollDirection == Axis.horizontal ? 1 : 0,
              child: builder(context, index),
            );
          },
        ),
      ),
    );
  }
}

Answer 2

You can do this using the built-in ListWheelScrollView by pairing it with the Rotated Box. This is kind of a hack which works.

RotatedBox(
   quarterTurns: -1,
   child: ListWheelScrollView(
   onSelectedItemChanged: (x) {
                  setState(() {
                    selected = x;
                  });
   },
   controller: _scrollController,
   children: List.generate(
                    itemCount,
                    (x) => RotatedBox(
                        quarterTurns: 1,
                        child: AnimatedContainer(
                            duration: Duration(milliseconds: 400),
                            width: x == selected ? 60 : 50,
                            height: x == selected ? 60 : 50,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                color: x == selected ? Colors.red : Colors.grey,
                                shape: BoxShape.circle),
                            child: Text('$x')))),
                itemExtent: itemWidth,
              )),
    );

Full source Code here

I recommend using this approach until this issue is resolved

Heres the output