Flutter旋转选择器插件kbspinningwheel的使用

kbspinningwheel 是一个用于Flutter应用中的可定制旋转选择器组件。本文将详细介绍如何在Flutter项目中使用这个插件。

安装

首先，在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_spinning_wheel: ^latest_version

然后运行以下命令来获取依赖：

flutter packages get

基本用法

创建一个新的Flutter项目，并编辑 lib/main.dart 文件如下：

import 'package:flutter/material.dart';

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

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

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

注意：您需要替换图片路径为实际存在的图片资源。

构造函数

以下是 SpinningWheel 的构造函数参数及其描述：

使用案例 - 游戏示例

下面是一个简单的游戏示例，展示如何使用 SpinningWheel 组件：

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

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

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

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

  dispose() {
    _dividerController.close();
  }

  [@override](/user/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: 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 as int) : 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](/user/override)
  Widget build(BuildContext context) {
    return Text('${labels[selected]}',
        style: TextStyle(fontStyle: FontStyle.italic, fontSize: 24.0));
  }
}