Flutter Spinner

spinner.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Spinner Game',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Spinner Game'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static int _counter1 = 4;
  static int _counter2 = 4;
  static int _counter3 = 4;
  final int _animateDuration = 3;
  final int _maxNo = 10;

  final FixedExtentScrollController _controller1 =
      FixedExtentScrollController(initialItem: _counter1);
  final FixedExtentScrollController _controller2 =
      FixedExtentScrollController(initialItem: _counter2);
  final FixedExtentScrollController _controller3 =
      FixedExtentScrollController(initialItem: _counter3);

  String _message = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Expanded(
              flex: 4,
              child: Row(
                children: <Widget>[
                  MyCustomListWheel(
                    controller: _controller1,
                    maxNo: _maxNo,
                  ),
                  MyCustomListWheel(
                    controller: _controller2,
                    maxNo: _maxNo,
                  ),
                  MyCustomListWheel(
                    controller: _controller3,
                    maxNo: _maxNo,
                  ),
                ],
              ),
            ),
            Expanded(
              flex: 1,
              child: Text(
                _message,
                style: const TextStyle(fontSize: 30.0),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          setState(() {
            _message = 'Please Wait';
            _counter1 = Random().nextInt(_maxNo) + 1;
            _controller1.animateToItem(
              _counter1,
              duration: Duration(seconds: _animateDuration),
              curve: Curves.easeOutBack,
            );
            _counter2 = Random().nextInt(_maxNo) + 1;
            _controller2.animateToItem(
              _counter2,
              duration: Duration(seconds: _animateDuration),
              curve: Curves.easeOutBack,
            );
            _counter3 = Random().nextInt(_maxNo) + 1;
            _controller3.animateToItem(
              _counter3,
              duration: Duration(seconds: _animateDuration),
              curve: Curves.easeOutBack,
            );

            if (_counter1 == _counter2 && _counter2 == _counter3) {
              _message = 'You Won!';
            } else {
              _message = 'Try Again!';
            }
          });
        },
        tooltip: 'Shuffle',
        label: const Text(
          'Shuffle!',
          style: TextStyle(fontSize: 18.0),
        ),
        isExtended: true,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

class MyCustomListWheel extends StatelessWidget {
  const MyCustomListWheel({
    Key? key,
    required FixedExtentScrollController controller,
    required int maxNo,
  })  : _controller = controller,
        _maxNo = maxNo,
        super(key: key);

  final FixedExtentScrollController _controller;
  final int _maxNo;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ListWheelScrollView.useDelegate(
        itemExtent: 100.0,
        squeeze: 0.9,
        diameterRatio: 0.65,
        childDelegate: ListWheelChildLoopingListDelegate(
          children: List<Widget>.generate(
            _maxNo,
            (index) => Container(
              // color: Colors.blue,
              padding: const EdgeInsets.symmetric(
                vertical: 16.0,
                horizontal: 32.0,
              ),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(16.0),
                color: Colors.blue,
              ),
              child: Text(
                '${index + 1}',
                style: const TextStyle(
                  fontSize: 56.0,
                ),
              ),
            ),
          ),
        ),
        controller: _controller,
      ),
    );
  }
}