ListWheelScrollView  widget and Attributes

ListWheelScrollView widget and Attributes

ยท

2 min read

The ListWheelScrollView widget in Flutter is a scrollable list that presents its children as a wheel, similar to a slot machine. It's particularly useful when you want to display a large number of items in a circular or wheel-like fashion, providing an engaging and unique scrolling experience.

Attributes:

  1. children (List<Widget>):

    • The list of widgets to be displayed in the wheel.
  2. itemExtent (double):

    • The height or width of each item in the wheel. This attribute determines the spacing between items.
  3. diameterRatio (double):

    • The ratio of the diameter of the wheel to the itemExtent. A value of 1.0 means the wheel is a complete circle.
  4. offAxisFraction (double):

    • The fraction of the remaining space to distribute above and below the visible wheel. A positive value moves the wheel upwards, while a negative value moves it downwards.
  5. useMagnifier (bool):

    • Whether to use a magnifying glass effect on the currently selected item.

Example:

import 'package:flutter/material.dart';

class ListWheelScrollViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListWheelScrollView Example'),
      ),
      body: ListWheelScrollView(
        itemExtent: 80,
        diameterRatio: 2.0,
        offAxisFraction: -0.5,
        useMagnifier: true,
        children: List.generate(
          10,
          (index) => ListTile(
            title: Text('Item $index'),
            tileColor: index % 2 == 0 ? Colors.blue : Colors.green,
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: ListWheelScrollViewExample(),
    ),
  );
}

In this example, a ListWheelScrollView is used to display a wheel of ListTile items. The itemExtent is set to 80, the diameterRatio is set to 2.0, and offAxisFraction is set to -0.5 to create a unique wheel layout. The useMagnifier attribute is set to true to enable the magnifying glass effect on the currently selected item. This showcases how you can use the ListWheelScrollView widget to create an interactive and visually appealing wheel of items in your Flutter app.

Did you find this article valuable?

Support Vinit Mepani by becoming a sponsor. Any amount is appreciated!

ย