Flutter彩带动画插件wndr_flutter_confetti的使用

Flutter彩带动画插件wndr_flutter_confetti的使用

插件简介

Wndr Confetti Package 是一个Flutter包，它简化了从屏幕底部角落显示彩带（confetti）动画的过程。该插件具有以下特点：

• 简单集成彩带动画
• 支持自定义彩带图像和颜色

使用方法

1. 导入插件

首先，在您的Dart文件中导入 wndr_flutter_confetti 包：

import 'package:wndr_flutter_confetti/wndr_flutter_confetti.dart';

2. 显示彩带动画

WndrConfetti 提供了两种方法来显示彩带动画，分别用于处理图像资源（如PNG、JPG等）和矢量图形资源（如SVG）。这两个方法的第一个参数是 BuildContext，第二个参数是资源路径，最后一个参数是一个可选的颜色列表，这些颜色将随机应用于彩带粒子作为 ColorFilter。

使用图像资源显示彩带

如果您想使用图像资源（如PNG、JPG等）来显示彩带，可以使用 startConfettiWithImageAsset 方法：

WunderFlutterConfetti.startConfettiWithImageAsset(
    context,
    'assets/ufo.png', // 图像资源路径
    [Colors.red, Colors.blue, Colors.green, Colors.orange, Colors.yellow] // 可选的颜色列表
);

使用矢量图形资源显示彩带

如果您想使用矢量图形资源（如SVG）来显示彩带，可以使用 startConfettiWithSvgAsset 方法：

WunderFlutterConfetti.startConfettiWithSvgAsset(
    context,
    'assets/ufo.svg', // 矢量图形资源路径
    [Colors.red, Colors.blue, Colors.green, Colors.orange, Colors.yellow] // 可选的颜色列表
);

完整示例代码

下面是一个完整的示例代码，展示了如何在Flutter应用中使用 wndr_flutter_confetti 插件来显示彩带动画。此示例包含两个按钮，分别用于触发基于SVG和PNG图像的彩带动画。

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

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Confetti Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blueGrey),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Confetti Demo Home Page'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
              onPressed: () {
                // 触发基于SVG的彩带动画
                WunderFlutterConfetti.startConfettiWithSvgAsset(
                  context,
                  'assets/ufo.svg',
                  colors: [
                    Colors.red,
                    Colors.blue,
                    Colors.green,
                    Colors.orange,
                    Colors.yellow
                  ],
                );
              },
              child: const Text('Confetti with SVG'),
            ),
            TextButton(
              onPressed: () {
                // 触发基于PNG的彩带动画
                WunderFlutterConfetti.startConfettiWithImageAsset(
                  context,
                  'assets/ufo.png',
                  colors: [
                    Colors.red,
                    Colors.blue,
                    Colors.green,
                    Colors.orange,
                    Colors.yellow
                  ],
                );
              },
              child: const Text('Confetti with PNG'),
            )
          ],
        ),
      ),
    );
  }
}