cilestal / clickable_list_wheel_view Goto Github PK
View Code? Open in Web Editor NEWSimple wrapper for ListWheelScrollView that allows children to respond on gesture (onTap) events
License: Apache License 2.0
Simple wrapper for ListWheelScrollView that allows children to respond on gesture (onTap) events
License: Apache License 2.0
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?
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.
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'),
),
);
}
}
Is there a way to change the background color of the selected item or active item in the scroll viewport ?
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.