Flutter 如何使用flutter_fortune_wheel: ^1.3.2插件

Flutter 使用 flutter_fortune_wheel: ^1.3.2 插件时遇到问题，按照文档配置后运行报错，提示无法加载资源。请问具体该怎么正确导入和使用这个转盘插件？需要额外配置什么参数吗？

2 回复

在 pubspec.yaml 中添加依赖：

dependencies:
  flutter_fortune_wheel: ^1.3.2

然后运行 flutter pub get。

使用示例：

FortuneWheel(
  items: [
    FortuneItem(child: Text('选项1')),
    FortuneItem(child: Text('选项2')),
  ],
)

可设置旋转动画和回调函数。

更多关于Flutter 如何使用flutter_fortune_wheel: ^1.3.2插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中使用 flutter_fortune_wheel: ^1.3.2 插件可以创建美观的抽奖转盘。以下是基本使用方法：

1. 添加依赖 在 pubspec.yaml 文件中添加：

dependencies:
  flutter_fortune_wheel: ^1.3.2

2. 基本使用代码

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

class WheelExample extends StatefulWidget {
  @override
  _WheelExampleState createState() => _WheelExampleState();
}

class _WheelExampleState extends State<WheelExample> {
  int selected = 0;
  final items = <String>[
    '奖品1', '奖品2', '奖品3', '奖品4',
    '奖品5', '奖品6', '奖品7', '奖品8'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 300,
              child: FortuneWheel(
                selected: selected.stream,
                items: [
                  for (var i = 0; i < items.length; i++)
                    FortuneItem(
                      child: Text(items[i]),
                      style: FortuneItemStyle(
                        color: _getColor(i),
                      ),
                    ),
                ],
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  selected = Fortune.randomInt(0, items.length);
                });
              },
              child: Text('开始旋转'),
            ),
          ],
        ),
      ),
    );
  }

  Color _getColor(int index) {
    final colors = [
      Colors.red, Colors.blue, Colors.green, Colors.yellow,
      Colors.orange, Colors.purple, Colors.pink, Colors.teal
    ];
    return colors[index % colors.length];
  }
}

主要参数说明：

  • selected: 使用 Stream 控制选中项
  • items: 转盘选项列表
  • style: 可自定义转盘样式

高级功能：

  • 添加动画效果
  • 自定义指示器
  • 设置旋转持续时间
  • 添加音效

运行 flutter pub get 安装依赖后即可使用。记得在旋转逻辑中处理业务逻辑，如奖品分配等。

回到顶部