Growing along with Flutter by knowing tones of building blocks of UI called ‘Widgets’, gives us goosebumps when we get to know about a widget which is new for us. In this article we’ll be detailing a widget like this named ListWheelScrollView. Many of us must be aware about it and may have used it in our projects as well. To whom, this is new one, let’s go further and explore it along till the end.
ListWheelScrollView is same as ListView widget but instead of plotting children widgets on flat plane view, it will display them as such they are on a vertical circular plane getting scrolled on a wheel. Look at the default rendering of both widgets as below,
Different between these two widgets can be clearly seen from the output. Unlike ListWheelScrollView widget, ListView widget does not have any specific method which gets triggered on item selection in the middle. This is one of the advantages which is very useful to provide UI for selection of specific item. Let’s explore how we can implement it.
There are two different ways to display items in ListWheelScrollView,
- Passing list of widgets directly as children to a delegate which manage rendering lazily
- Passing a delegate of ListWheelChildDelegate to childDelegate which manage & render children lazily
Type 1
We’ll be passing list of items using List.generate() directly to children parameter of ListWheelScrollView.
***CODE***
ListWheelScrollView(
itemExtent: 80,
physics: const FixedExtentScrollPhysics(),
overAndUnderCenterOpacity: 0.5,
children: List.generate(
25,
(index) => Container(
height: 60,
width: 60,
margin: const EdgeInsets.symmetric(
horizontal: 12.0,
vertical: 4.0,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
10.0,
),
border: Border.all(
width: 2.0,
color: Colors.black45,
),
),
alignment: Alignment.center,
child: Text(
‘${index + 1}’,
style: Theme.of(context).textTheme.subtitle2,
),
),
),
);
***CODE***
This will create a list of 25 items, displaying index in the middle of Container widget starting with index no 0 (for display we’ve added +1 to the index). Parameter titled itemExtent is used to define the size of each child in the main axis. Physics define the scroll physics of this list view. Parameter overAndUnderCenterOpacity define opacity for items which is above and below centre item. As we can see we have put half opacity in our case hence item in centre is visible clearly compared to other items. See below how it looks like.
- REC_01
Type 2
Another way is where we can pass a different type of ListWheelChildDelegate to childDelegate parameter of ListWheelScrollView.useDelegate constructor to display items in different way. So, let’s go through those each.
ListWheelChildListDelegate
By use of this list items will be rendering same as what we have done using Type 1. See below code and output. Using explicit list of items, we can render this view.
***CODE***
ListWheelScrollView.useDelegate(
itemExtent: 50,
physics: const FixedExtentScrollPhysics(),
overAndUnderCenterOpacity: 0.5,
childDelegate: ListWheelChildListDelegate(
children: List.generate(
20,
(index) => _containerItem(index),
),
),
);
***CODE***
- REC_02
ListWheelChildLoopingListDelegate
With use of this delegate, items will be rendered in a way where a list can be looped on a passed list. At the end of the list item, first item will be render next to it so we can loop through the item list. Check code and output below. Displays items like infinite list of items by looping over them.
***CODE***
ListWheelScrollView.useDelegate(
itemExtent: 50,
physics: const FixedExtentScrollPhysics(),
overAndUnderCenterOpacity: 0.5,
childDelegate: ListWheelChildLoopingListDelegate(
children: List.generate(
20,
(index) => _containerItem(index),
),
),
);
***CODE***
- REC_03
ListWheelChildBuilderDelegate
Delegate which renders same as Type 1 and first ListWheelChildDelegate but only difference is, it supplies children using Builder callback.
***CODE***
ListWheelScrollView.useDelegate(
itemExtent: 50,
physics: const FixedExtentScrollPhysics(),
overAndUnderCenterOpacity: 0.5,
childDelegate: ListWheelChildBuilderDelegate(
childCount: 20,
builder: (BuildContext context, int index) => _containerItem(index),
),
);
***CODE***
- REC_04
So, these is how a list of items can be represented in a different way with improved UI. We hope this article may give our readers something new to learn today. In out next article, we’ll explore more about ListWheelScrollView widget, stay tuned for it. Till then, let’s live with peace.
You might also like
Stay ahead in tech with Sunflower Lab’s curated blogs, sorted by technology type. From AI to Digital Products, explore cutting-edge developments in our insightful, categorized collection. Dive in and stay informed about the ever-evolving digital landscape with Sunflower Lab.
