ListWheelScrollView Widget in Flutter

ListWheelScrollView is a flutter widget that is used to build ListView with a 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 constraint 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 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 viewport.
• 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 scrollable 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:

File: main.dart

Dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// 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: const Wheel(),
    );
  }
}

class Wheel extends StatefulWidget {
  const Wheel({Key? key}) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _WheelState createState() => _WheelState();
}

class _WheelState extends State<Wheel> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Geeksforgeeks"),
        backgroundColor: Colors.green,
      ),
      body: ListWheelScrollView(
        itemExtent: 100,

        // diameterRatio: 1.6,
        // offAxisFraction: -0.4,
        // squeeze: 0.8,

        // DEPRECATED : clipToSize does not exist anymore.
        // USe clipBehaviour instead.

        // clipToSize: true,

        clipBehavior: Clip.antiAlias,
        children: const <Widget>[
          ElevatedButton(
            onPressed: null,
            child: Text(
              'Item 1',
              textAlign: TextAlign.start,
              style: TextStyle(
                  fontSize: 25,
                  color: Colors.black,
                  fontWeight: FontWeight.bold),
            ),
          ),
          ElevatedButton(
            onPressed: null,
            child: Text(
              'Item 2',
              textAlign: TextAlign.start,
              style: TextStyle(
                  fontSize: 25,
                  color: Colors.black,
                  fontWeight: FontWeight.bold),
            ),
          ),
          ElevatedButton(
            onPressed: null,
            child: Text(
              'Item 3',
              textAlign: TextAlign.start,
              style: TextStyle(
                  fontSize: 25,
                  color: Colors.black,
                  fontWeight: FontWeight.bold),
            ),
          ),
          ElevatedButton(
            onPressed: null,
            child: Text(
              'Item 4',
              textAlign: TextAlign.start,
              style: TextStyle(
                  fontSize: 25,
                  color: Colors.black,
                  fontWeight: FontWeight.bold),
            ),
          ),
          ElevatedButton(
            onPressed: null,
            child: Text(
              'Item 5',
              textAlign: TextAlign.start,
              style: TextStyle(
                  fontSize: 25,
                  color: Colors.black,
                  fontWeight: FontWeight.bold),
            ),
          ),
          ElevatedButton(
            onPressed: null,
            child: Text(
              'Item 6',
              textAlign: TextAlign.start,
              style: TextStyle(
                  fontSize: 25,
                  color: Colors.black,
                  fontWeight: FontWeight.bold),
            ),
          ),
          ElevatedButton(
            onPressed: null,
            child: Text(
              'Item 7',
              textAlign: TextAlign.start,
              style: TextStyle(
                  fontSize: 25,
                  color: Colors.black,
                  fontWeight: FontWeight.bold),
            ),
          ),
          ElevatedButton(
            onPressed: null,
            child: Text(
              'Item 8',
              textAlign: TextAlign.start,
              style: TextStyle(
                  fontSize: 25,
                  color: Colors.black,
                  fontWeight: FontWeight.bold),
            ),
          ),
          // 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 as shown below as follows:

If the properties are defined as below:

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

The following design changes can be observed as shown below as follows:

If the properties are defined as below:

itemExtent: 200,
diameterRatio: 1.5,
clipToSize: true

The following design changes can be observed as shown below as follows:

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: