Flutter动画按钮插件animated_random_button的使用

Flutter动画按钮插件animated_random_button的使用

Animated Random Button Flutter 插件提供了一组四个带有动画效果的按钮，用于生成不同场景下的随机值。这些按钮包括：

1. 硬币按钮：按下时会随机输出“奇数”或“偶数”。
2. 骰子按钮：默认情况下按下时会输出1到6之间的随机值，但范围可以更改。
3. 转盘按钮：按下时会输出一个随机颜色。
4. 魔法球按钮：按下时会像经典的魔法球玩具一样输出随机答案。

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  animated_random_button: ^1.0.2

然后在终端运行 flutter pub get 来安装包。

使用

在 Dart 文件中导入该包：

import 'package:animated_random_button/animated_random_button.dart';

硬币按钮

硬币按钮可以按如下方式使用：

CoinButton(
  onPressed: () {},
  radius: 100,
  coin: Coins.Cent,
  duration: const Duration(seconds: 2),
),

你也可以添加自定义硬币：

class newCoins extends Coins {

  static const myFancyCoin = Coins(Coin('assets/FancyCoinHead.png','assets/FancyCoinTail.png'));

  newCoins(super.value);
}

骰子按钮

骰子按钮可以按如下方式使用：

BouncingDiceButton(
  start: 1, // 默认值
  end: 6, // 默认值
  duration: Duration(milliseconds: 500),
  onPressed: () {
    print("hello");
  },
),

转盘按钮

转盘按钮可以按如下方式使用：

RandomColorWheel(
  colors: const [
    Colors.black,
    Colors.amber,
    Colors.black12,
    Color(0xFF9D53CC),
  ],
  size: 100,
  onPressed: () {
    print("Wheel is spinning");
  },
  duration: const Duration(seconds: 1),
  waitForAnimation: false,
),

魔法球按钮

魔法球按钮可以按如下方式使用：

Magic8Ball(
  radius: 100,
  shakeDistance: 15,
  numberOfShakes: 10,
  durationOfShake: Duration(milliseconds: 100),
  answers: ["yes", "no"], // 可以使用默认答案
),

自定义

你可以更改动画的持续时间、调整按钮的大小和样本。

示例

要查看如何更全面地使用 Animated Random Button 包的示例，可以检查包中提供的 example 文件夹。

import 'package:animated_random_button/animated_random_button.dart';
import 'package:animated_random_button/coin_button.dart';
import 'package:animated_random_button/magic_sphere.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class newCoins extends Coins {

  static const myFancyCoin = Coins(Coin('assets/FancyCoinHead.png','assets/FancyCoinTail.png'));

  newCoins(super.value);
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final eurController = CoinController();
    final rubController = CoinController();
    final centController = CoinController();
    final fancyCoinController = CoinController();
    final colorController = RandomColorWheelController();
    final diceButtonController = DiceButtonController();
    final magicBallController = MagicBallController();
    return MaterialApp(
      title: '示例：随机小部件工具包',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('示例：随机小部件工具包'),
        ),
        body: Center(
            child: SingleChildScrollView(
          child: Column(
            children: [
              const SizedBox(
                height: 100,
              ),
              RandomColorWheel(
                controller: colorController,
                colors: const [
                  Colors.black,
                  Colors.amber,
                  Colors.black12,
                  Color(0xFF9D53CC),
                  Color(0xFF67508D),
                  Color(0xff141460),
                  Color.fromRGBO(10, 186, 181, 1),
                ],
                size: 100,
                onPressed: () {
                  print(colorController.color);
                  print("Wheel is spinning");
                },
                duration: const Duration(seconds: 1),
              ),
              const SizedBox(
                width: 30,
                height: 30,
              ),
              const SizedBox(
                height: 50,
              ),
              BouncingDiceButton(
                controller: diceButtonController,
                start: 1,
                end: 6,
                duration: const Duration(milliseconds: 2000),
                onPressed: () {
                  print(diceButtonController.value);
                  print("hello");
                },
              ),
              const SizedBox(
                height: 50,
              ),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  CoinButton(radius: 100, coin: newCoins.myFancyCoin, coinController: fancyCoinController, onPressed: (){},),
                  const SizedBox(
                    width: 25,
                  ),
                  CoinButton(
                    onPressed: () {},
                    radius: 100,
                    coin: Coins.Euro,
                    duration: const Duration(seconds: 2),
                    coinController: eurController,
                  ),
                  const SizedBox(
                    width: 25,
                  ),
                  CoinButton(
                    onPressed: () {},
                    radius: 100,
                    coin: Coins.Ruble,
                    duration: const Duration(seconds: 2),
                    coinController: rubController,
                  ),
                  const SizedBox(
                    width: 25,
                  ),
                  CoinButton(
                    onPressed: () {},
                    radius: 100,
                    coin: Coins.Cent,
                    duration: const Duration(seconds: 2),
                    coinController: centController,
                  ),
                ],
              ),
              const SizedBox(
                height: 50,
              ),
              Magic8Ball(
                radius: 100,
                shakeDistance: 15,
                numberOfShakes: 10,
                durationOfShake: Duration(milliseconds: 100),
                answers: ["yes", "definitely yes"],
                controller: magicBallController,
                onPressed: (){print(magicBallController.answer);},
              ),
              const SizedBox(
                height: 50,
              ),
            ],
          ),
        )),
      ),
    );
  }
}