Flutter ListWheelView example

readme.md

Create by https://gist.github.com/CaiJingLong/a299d15b92edc2d09a8a06cf6dd5a1b0

main.dart

import 'package:flutter/material.dart';
import 'dart:collection';

import 'dart:math';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ListWheelExample(),
    );
  }
}

class ListWheelExample extends StatefulWidget {
  @override
  _ListWheelExampleState createState() => _ListWheelExampleState();
}

class _ListWheelExampleState extends State<ListWheelExample> {
  int value = 0;

  LinkedHashMap<int, FixedExtentScrollController> controllerMap =
      LinkedHashMap();

  bool isScrollFromController = false;

  @override
  void initState() {
    super.initState();
    for (var i = 4; i >= 0; i--) {
      FixedExtentScrollController controller = FixedExtentScrollController();
      controllerMap[i] = controller;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.runtimeType.toString()),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: Container(
              decoration: BoxDecoration(
                  border: Border.all(
                color: Colors.grey,
                width: 1,
              )),
              height: 130,
              child: Row(
                children: controllerMap.keys.map((key) {
                  return _buildItem(key, controllerMap[key]);
                }).toList(),
              ),
            ),
          ),
          Text("this value = $value"),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _randomValue,
        child: Icon(Icons.refresh),
      ),
    );
  }

  Widget _buildItem(int bits, ScrollController controller) {
    return Expanded(
      child: ListWheelScrollView.useDelegate(
        magnification: 1,
        onSelectedItemChanged: (i) {
          onChange(bits, i);
        },
        controller: controller,
        itemExtent: 40,
        physics: const FixedExtentScrollPhysics(),
        childDelegate: ListWheelChildBuilderDelegate(
          childCount: 10,
          builder: (BuildContext context, int index) {
            return Center(
              child: Text(
                index.toString(),
                style: TextStyle(fontSize: 30),
              ),
            );
          },
        ),
      ),
    );
  }

  void onChange(int bits, int i) {
    if (isScrollFromController) {
      return;
    }
    int total = 0;
    controllerMap.keys.forEach((k) {
      final controller = controllerMap[k];
      final v = int.tryParse("1${'0' * k}") * controller.selectedItem;
      total += v;
    });

    this.value = total;
    setState(() {});
  }

  Future<void> _randomValue() async {
    final value = Random().nextInt(99999);
    this.value = value;
    isScrollFromController = true;

    final duration = Duration(milliseconds: 200);

    print(value);

    controllerMap.forEach((k, v) {
      final base = int.tryParse("1${'0' * k}");
      final target = value ~/ base % 10;
      v.animateToItem(target, duration: duration, curve: Curves.linear);
    });

    await Future.delayed(duration * 1.1);

    isScrollFromController = false;
    setState(() {});
  }
}