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 in it. 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. 

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

Properties of ListWheelScrollView:

  • controller: used to control the current item.
  • diameterRatio: diameter of wheel.
  • OffAxisFraction: how the wheel is horizontally off-center.
  • useMagnifier: Magnification for the central item.
  • magnification: zoom-in value.
  • itemExtent: size of each child in 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.


Article Tags :

5


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