ListWheelScrollView Widget in Flutter - GeeksforGeeks

14 Feb, 2022
ListWheelScrollView is a flutter widget that is used to build ListView with 3D-effect. We can also use ListView to create a list of items but we can’t add a 3D effect to it plus it also comes with a constrain that all the children inside this widget must be of the same size along the strolling axis. Flutter’s ListWheelScrollView adds its children in a scrollable wheel. That results in a 3D effect as if the children are rotating in a wheel. This widget comes with many properties. Some allow us to set the diameter of the wheel, make of off-set, or even add a magnification effect.
Syntax:
ListWheelScrollView({Key key,
 ScrollController controller, 
 ScrollPhysics physics, 
 double diameterRatio, 
 double perspective, 
 double offAxisFraction, 
 bool useMagnifier, 
 double magnification, 
 double overAndUnderCenterOpacity, 
 double itemExtent, 
 double squeeze, 
 void Function(int) onSelectedItemChanged, 
 bool clipToSize, 
 bool renderChildrenOutsideViewport, 
 List<Widget> children})
Syntax:
const ListWheelScrollView.useDelegate(
{Key key,
ScrollController controller,
ScrollPhysics physics,
double diameterRatio: RenderListWheelViewport.defaultDiameterRatio,
double perspective: RenderListWheelViewport.defaultPerspective,
double offAxisFraction: 0.0,
bool useMagnifier: false,
double magnification: 1.0,
double overAndUnderCenterOpacity: 1.0,
@required double itemExtent,
double squeeze: 1.0,
ValueChanged<int> onSelectedItemChanged,
bool renderChildrenOutsideViewport: false,
Clip clipBehavior: Clip.hardEdge,
String restorationId,
@required ListWheelChildDelegate childDelegate}
)
childDelegate: This property takes ListWheelChildDelegate class as the parameter value (final). It lazily initiates the child.
//Implementation
final ListWheelChildDelegate childDelegate
childBehaviour: This property takes Clip enum as the parameter. It controls the portion of the content to be clipped.
controller:  This property takes ScrollController class as the parameter and it is used to control the current item.
diameterRatio: This property takes a double value as the parameter and it determines the ratio between the size of the wheel and the size of vireport.
itemExtent: This property takes a double value as the parameter, which has to be a positive number. It decides the size of each child in the wheel.
magnification: This property also takes in a double value as the parameter and zoom-in value, by default it is set to 1.0.If it is greater than 1.0 the center element will be zoomed by that factor and vice-versa.
OffAxisFraction: This property also takes in a double value as the parameter and controls how the wheel is horizontally off-center.
//Implementation

final double offAxisFraction
onSelectedItemChanged: This property takes in ValueChanged<T> typedef as the parameter. It is always called when the center child widget in the wheel changes.
// Syntax
void ValueChanged (
T value
)
overAndUnderCenterOpacity: This property takes in a double value (final) as the parameter and accordingly applies opacity to the child widgets except the one in the center of the wheel.
perspective: This property also takes in a double value (final), which has to be a positive number as the parameter. It controls the distinction between the far-away parts and the near-by parts of the wheel.
physics: This widget also take in ScrollPhysics class as the parameter to determine the physical behaviour of the wheel in respect to the users behaviours (for example, when user scrolls or when user stop scrolling).
//Implementation
final ScrollPhysics physics
renderedChildOutsideViewport: This property takes in a boolean value (final) as the parameter to decide whether to display the child widget only inside the viewport or not.
restorationId: This property takes in the a String as the parameter. This saves and restores the scroll offset of the scrollabe in the wheel.
squeeze: This property takes in a double value (final) as the parameter. The double value must always be a positive number. This controls the compactness of the child  widgets in the wheel.
//Implementation
final double squeeze
useMagnifier: This property also takes in a boolean value (final) as the parameter to control the magnification for the central item on the wheel.
Example:
The main.dart file.
Dart
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {  // This widget is the root  // of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'ListWheelScrollView Example',      theme: ThemeData(                 primarySwatch: Colors.blue,      ),      debugShowCheckedModeBanner: false,      home: Wheel(),    );  }} class Wheel extends StatefulWidget {  @override  _WheelState createState() => _WheelState();}class _WheelState extends State<Wheel> {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Geeksforgeeks"),        backgroundColor: Colors.green,      ),      body: ListWheelScrollView(        itemExtent: 100,                 // diameterRatio: 1.6,        // offAxisFraction: -0.4,        // squeeze: 0.8,        clipToSize: true,       children: <Widget>[         RaisedButton(onPressed:null ,       child: Text("Item 1",textAlign:TextAlign.start,            style:TextStyle(color:Colors.black,fontWeight: FontWeight.bold,fontSize: 25),),) ,       RaisedButton(onPressed:null ,       child: Text("Item 2",textAlign:TextAlign.center,            style:TextStyle(color:Colors.black,fontWeight: FontWeight.bold,fontSize: 25),),) ,       RaisedButton(onPressed:null ,       child: Text("Item 3",textAlign:TextAlign.center,            style:TextStyle(color:Colors.black,fontWeight: FontWeight.bold,fontSize: 25),),) ,       RaisedButton(onPressed:null ,       child: Text("Item 4",textAlign:TextAlign.center,            style:TextStyle(color:Colors.black,fontWeight: FontWeight.bold,fontSize: 25),),) ,       RaisedButton(onPressed:null ,       child: Text("Item 5",textAlign:TextAlign.center,            style:TextStyle(color:Colors.black,fontWeight: FontWeight.bold,fontSize: 25),),) ,       RaisedButton(onPressed:null ,       child: Text("Item 6",textAlign:TextAlign.center,            style:TextStyle(color:Colors.black,fontWeight: FontWeight.bold,fontSize: 25),),) ,       RaisedButton(onPressed:null ,       child: Text("Item 7",textAlign:TextAlign.center,            style:TextStyle(color:Colors.black,fontWeight: FontWeight.bold,fontSize: 25),),) ,       RaisedButton(onPressed:null ,       child: Text("Item 8",textAlign:TextAlign.center,            style:TextStyle(color:Colors.black,fontWeight: FontWeight.bold,fontSize: 25),),) ,       ],      ),    );  }}
 
The following properties are defined in the above example:
itemExtent: 100,
clipToSize: true
Output:
If the properties are defined as below:
itemExtent: 100,
clipToSize: true,
diameterRatio: 1
The following design changes can be observed:
If the properties are defined as below:
itemExtent: 100,
clipToSize: true,
diameterRatio: 1
offAxisFraction: -0.4
The following design changes can be observed:
If the properties are defined as below:
itemExtent: 200,
diameterRatio: 1.5,
clipToSize: true
The following design changes can be observed:
If the properties are defined as below:
itemExtent: 200,
diameterRatio: 1.5,
offAxisFraction: 0.4,
squeeze: 0.8,
clipToSize: true
The following design changes can be observed:
For the complete code, you can refer to https://github.com/singhteekam/Flutter-ListWheelScrollView-Widget
ankit_kumar_
varshagumber28
Flutter
Dart
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - Flexible Widget
Flutter - BoxShadow Widget
Dart Tutorial
Flutter - Stack Widget
Operators in Dart
Flutter - Dialogs
Android Studio Setup for Flutter Development