flutter-回転ホイール

flutter_spinning_wheel

A customizable widget to use as a spinning wheel in Flutter.

Getting Started

• Installation
• Basic Usage
• Constructor
• Use Cases

Installation

Add

flutter_spinning_wheel : ^lastest_version

to your pubspec.yaml, and run

flutter packages get

in your project's root directory.

Basic Usage

Create a new project with command

flutter create myapp

Edit lib/main.dart like this:

import 'package:flutter/material.dart';

import 'package:flutter_circular_slider/flutter_circular_slider.dart';

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blueGrey,
        body: Center(
          child: Container(child:
            SpinningWheel(
              Image.asset('assets/images/wheel-6-300.png'),
              width: 310,
              height: 310,
              dividers: 6,
              onEnd: _dividerController.add,
            ),
          ),
        ));
  }
}

You can replace the image with one of your preference.

Basic	Game

Constructor

Parameter	Default	Description
image		The image to be used as wheel.
dividers		The number of divisions in the image. It's important that all divisions are equal.
height		Height of the container that will display the wheel.
width		Width of the container that will display the wheel.
initialSpinAngle	0.0	Initial rotation angle for the wheel, so the wheel could look initialy rotated.
spinResistance	0.5	From >0.0 to 1.0 will be used to calculate the speed and deceleration of the wheel.
canInteractWhileSpinning	true	If set to false, once the animation starts the user won't be able to stop it.
secondaryImage		Secondary image that will be rendered on top of the wheel and won't be affected by the animation.
secondaryImageHeight		Height for the secondary image.
secondaryImageWidth		Width for the secondary image.
secondaryImageTop		Used to fine tune the position of the secondary image. Otherwise it will be centered.
secondaryImageLeft		Used to fine tune the position of the secondary image. Otherwise it will be centered.
onUpdate	void onUpdate(int value)	Callback function executed when the selected divider changes during the animation.
onEnd	void onEnd(int value)	Callback function executed when the animation stops.
shouldStartOrStop		Stream to interact with the wheel, with double being pixelsPerSecond in axis y (default 8000)

Use Cases

Game

import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_spinning_wheel/flutter_spinning_wheel.dart';

void main() {
  SystemChrome.setEnabledSystemUIOverlays([]);
  runApp(MyApp());
}

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

class MyHomePage extends StatelessWidget {
  final StreamController _dividerController = StreamController<int>();

  dispose() {
    _dividerController.close();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(backgroundColor: Color(0xffDDC3FF), elevation: 0.0),
      backgroundColor: Color(0xffDDC3FF),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SpinningWheel(
              Image.asset('assets/images/roulette-8-300.png'),
              width: 310,
              height: 310,
              initialSpinAngle: _generateRandomAngle(),
              spinResistance: 0.6,
              canInteractWhileSpinning: false,
              dividers: 8,
              onUpdate: _dividerController.add,
              onEnd: _dividerController.add,
              secondaryImage:
                  Image.asset('assets/images/roulette-center-300.png'),
              secondaryImageHeight: 110,
              secondaryImageWidth: 110,
            ),
            SizedBox(height: 30),
            StreamBuilder(
              stream: _dividerController.stream,
              builder: (context, snapshot) =>
                  snapshot.hasData ? RouletteScore(snapshot.data) : Container(),
            )
          ],
        ),
      ),
    );
  }

  double _generateRandomAngle() => Random().nextDouble() * pi * 2;
}

class RouletteScore extends StatelessWidget {
  final int selected;

  final Map<int, String> labels = {
    1: '1000\$',
    2: '400\$',
    3: '800\$',
    4: '7000\$',
    5: '5000\$',
    6: '300\$',
    7: '2000\$',
    8: '100\$',
  };

  RouletteScore(this.selected);

  @override
  Widget build(BuildContext context) {
    return Text('${labels[selected]}',
        style: TextStyle(fontStyle: FontStyle.italic, fontSize: 24.0));
  }
}