cilestal / clickable_list_wheel_view Goto Github PK

Is there a way to change the background color of the selected item or active item in the scroll viewport ?

I have the following implementation:

ListWheelScrollView.useDelegate(
  controller: ...,
  childDelegate: ListWheelChildLoopingListDelegate(
    children: ...,
  ),
  itemExtent: 36.0,
)

But when I try to wrap it in the ClickableListWheelScrollView widget, only the first round of widgets work, that means the widgets before the first index and after the last index doesn't get tapped.

and one more thing: jumpTo is not working for me.

This is how I implemented it:

`class MyListWheel extends StatefulWidget {
@OverRide
_MyListWheelState createState() => _MyListWheelState();
}

class _MyListWheelState extends State {
final _scrollController = FixedExtentScrollController();

final List months = [
MonthCardWidget(month: Month('January')),
MonthCardWidget(month: Month('February')),
MonthCardWidget(month: Month('March')),
MonthCardWidget(month: Month('April')),
MonthCardWidget(month: Month('May')),
MonthCardWidget(month: Month('Juni')),
MonthCardWidget(month: Month('Juli')),
MonthCardWidget(month: Month('August')),
MonthCardWidget(month: Month('September')),
MonthCardWidget(month: Month('October')),
MonthCardWidget(month: Month('November')),
MonthCardWidget(month: Month('December')),
];

@OverRide
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
// only scroll after build is finished
_scrollController.jumpTo(_scrollController.position.maxScrollExtent);
});
}

@OverRide
Widget build(BuildContext context) {
final double _itemHeight = Constants.height(context) / 1.8;

return ClickableListWheelScrollView(
  scrollController: _scrollController,
  itemHeight: _itemHeight,
  itemCount: months.length,
  scrollOnTap: true,
  onItemTapCallback: (index) {
    print("onItemTapCallback index: $index");
  },
  child: ListWheelScrollView.useDelegate(
    controller: _scrollController,
    itemExtent: _itemHeight,
    physics: FixedExtentScrollPhysics(),
    diameterRatio: 3,
    squeeze: 0.95,
    onSelectedItemChanged: (index) {
      print(index);
    },
    childDelegate: ListWheelChildBuilderDelegate(
      builder: (context, index) => months[index],
      childCount: months.length,
    ),
  ),
);

}
}
`

Calling scrollTo was working just fine with the normal listWheelView but for clickableListWHeel it is not working anymore.. Am I missing something here?

When I scroll to between 2 items and it will stop at middle.

Is it possible to have a smooth transitions for the currentItem? Here is a Screenshot for a better understanding:

Is it somehow possible to avoid that?

Hey, first of all thanks for this great plugin. I have been using it with an inifinite scroll view and noticed that after one rotation, the events do not work any more. I suspect it is because of this line:

Do you think we can remove this if clause and change it to newIndex = newIndex % widget.itemCount? If we perform a module, we can always be sure that it stays within the bounds and the wraparound after multiple rotations would also work.

Please let me know what yout hink about this.

In my case, I am using ListWheelScrollView.useDelegate with childDelegate: ListWheelChildLoopingListDelegate

Whenever partially scrolling through the ClickableListWheelScrollView which contains a ListWheelScrollView with FixedExtentScrollPhysics the index of onItemTapCallback is set to the wrong value. When I say partially scrolling I mean scrolling up slightly but then letting go before you move to the item above which causes the list to snap back to the original item. After clicking on the original item, the onItemTapCallback will be called with the index of the item above even though the list is still on the original item. Here is an example of what I mean

In the gif above you can see I only scroll up partially, not enough to move to the item above, yet when clicking the item in the center, the list moves to the item above as if it was clicked.

The code for this is just the example code from the package page:

import 'package:clickable_list_wheel_view/clickable_list_wheel_widget.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Material(
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final _scrollController = FixedExtentScrollController();

  static const double _itemHeight = 60;
  static const int _itemCount = 100;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: ClickableListWheelScrollView(
          scrollController: _scrollController,
          itemHeight: _itemHeight,
          itemCount: _itemCount,
          onItemTapCallback: (index) {
            print("onItemTapCallback index: $index");
          },
          child: ListWheelScrollView.useDelegate(
            controller: _scrollController,
            itemExtent: _itemHeight,
            physics: FixedExtentScrollPhysics(),
            overAndUnderCenterOpacity: 0.5,
            perspective: 0.002,
            onSelectedItemChanged: (index) {
              print("onSelectedItemChanged index: $index");
            },
            childDelegate: ListWheelChildBuilderDelegate(
              builder: (context, index) => _child(index),
              childCount: _itemCount,
            ),
          ),
        ),
      ),
    );
  }

  Widget _child(int index) {
    return SizedBox(
      height: _itemHeight,
      child: ListTile(
        leading: Icon(IconData(int.parse("0xe${index + 200}"), fontFamily: 'MaterialIcons'), size: 50),
        title: Text('Heart Shaker'),
        subtitle: Text('Description here'),
      ),
    );
  }
}

First of all, awesome work!

I implemented ClickableListWheel but there is a behavior which I think is not supposed to be like this. It feels unintuitive.

When scrolling up and tapping the lower item it scrolls up again. I think it makes more sense if you see it, here is a screenvideo:

In the video I scroll and then tap on "September" but as you can see it scrolls right back to "August" this only happens if you scroll up. The other way around it is working perfectly fine.