Note: The Flutter and Dart versions are as follows without special instructions:

  • Flutter version: 1.12.13+ Hotfix.5
  • Dart version: 2.7.0

Basic usage

The first thing that comes to mind when we’re showing a lot of data is using a ListView, and if you think that a ListView is boring, you can use a ListWheelScrollView, and ListWheelScrollView is the same family as ListView, But it renders like a wheel (or roller), and instead of sliding on a flat surface, it turns the wheel. Here’s a wave of effects:

The ListWheelScrollView is used in the same way as the ListView.

ListWheelScrollView(
      itemExtent: 150,
      children: <Widget>[
		...
	  ],
    );
Copy the code

Children is a child control, and itemExtent specifies the height of each Item.

This approach is obviously unscientific when there is a large amount of data, as is the case with ListView.builder:

ListWheelScrollView.useDelegate(
      itemExtent: 150,
      childDelegate: ListWheelChildBuilderDelegate(
          builder: (context, index) {
            return Container(
              margin: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
              color: Colors.primaries[index % 10],
              alignment: Alignment.center,
              child: Text('$index')); }, childCount: 100), );Copy the code

Adjust the diameter

The ListWheelScrollView has been set to breathe about the diameters of the diameters, which are diameters in the ListWheelScrollView.

ListWheelScrollView(
      itemExtent: 150,
      diameterRatio: 1,
      children: <Widget>[
        ...
      ],
    )
Copy the code

The default is 2, which is the height of the ListWheelScrollView if the number is vertical. The smaller they are, the more rounded the cylinder is.

Adjust the perspective

The value range is (0,0.01). Note that the left is open and the right is closed. The default value is 0.003. The larger the value is, the rounder the rendering effect will be.

ListWheelScrollView(itemExtent: 150, Perspective: 0.003, Children: <Widget>[...] ,);Copy the code

offAxisFraction

The offAxisFraction property represents the degree to which the wheel is off center horizontally, and is used as follows:

ListWheelScrollView(
      itemExtent: 150,
      offAxisFraction: 13,
      children: <Widget>[

      ],
    );
Copy the code

OffAxisFraction with a value from 0 to 2:

A magnifying glass

Use the useMagnifier and Magnification properties to implement the magnification effect. UseMagnifier specifies whether to enable a magnifying glass. Magnification is the magnification property.

ListWheelScrollView(
      itemExtent: 150,
      useMagnifier: true, magnification: 1.5, children: <Widget>[],);Copy the code

The effect is as follows:

squeeze

The squeeze attribute represents the ratio of the number of child controls on the wheel to the number of child controls on a flat list of the same size. For example, if the height is 100px and [itemExtent] is 20px, then five items will be placed in an equivalent flat list. When squeeze is 1, RenderListWheelViewport also displays 5 child controls. When squeeze is 2, RenderListWheelViewport will display 10 child controls, the default is 1, as follows:

ListWheelScrollView(
      itemExtent: 150,
      squeeze: 1,
      children: <Widget>[

      ],
    );
Copy the code

Read more:

  • Overview of the Flutter series
  • Expand and Flexible of Flutter Widgets
  • Flutter AnimatedList Widgets
  • Flutter SliverAppBar Widgets
If this article is helpful to you, PLEASE give me a “like” and follow my official account. Thank you very much.