ListWheelScrollView Widget in Flutter

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.

Constructor of ListWheelScrollView class:

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})

ListWheelScrollView.useDelegate Constructor

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}
)

Properties of ListWheelScrollView:

  • 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 opecity 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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


 



The following properties are defined in the above example:

itemExtent: 100,
clipToSize: true





Output:

 ListWheelScrollView widget without diameter ratio

If the properties are defined as below:

itemExtent: 100,
clipToSize: true,
diameterRatio: 1





The following design changes can be observed:

ListViewScrollWheel with diameter ratio

If the properties are defined as below:

itemExtent: 100,
clipToSize: true,
diameterRatio: 1
offAxisFraction: -0.4





The following design changes can be observed:



ListViewScrollWheel with diameter ratio and off axis fraction

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:

ListViewScrollWheel with diameter ratio and clip to size and squeeze

For the complete code, you can refer to https://github.com/singhteekam/Flutter-ListWheelScrollView-Widget




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ankit_kumar_

Article Tags :

6


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.