Giter VIP home page Giter VIP logo

clickable_list_wheel_view's People

Contributors

cilestal avatar pzet123 avatar snipd-min avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

clickable_list_wheel_view's Issues

jumpTo not working

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?

Jumping to wrong item when scrolling up

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:

RPReplay_Final1614628967.mov

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.

Wrong item selected after partial scroll with FixedExtentScrollPhysics

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
partialscroll

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'),
      ),
    );
  }
}

Problem with infinitely looping scroll view

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:

if (newIndex < 0 || newIndex >= widget.itemCount) {

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

Doesn't work when using `ListWheelChildLoopingListDelegate`

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.

Smooth transition for currentItem

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

Simulator Screen Shot - iPhone SE (3rd generation) - 2023-01-18 at 22 36 08

Is it somehow possible to avoid that?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.