Flutter版confetti(放礼花)包怎么写

发布于 1周前 作者 eggper 来自 Flutter

之前看到 canvas-confetti 做的 confetti 动画挺好的,花了几天时间在 flutter 上实现了下。

仓库地址: https://github.com/cj0x39e/flutter_confetti

在线预览地址: https://cj0x39e.github.io/flutter_confetti/

分享给大家,也许用的上呢🎉


Flutter版confetti(放礼花)包怎么写

更多关于Flutter版confetti(放礼花)包怎么写的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

14 回复

desktop 上面有可能全屏显示动画么?

更多关于Flutter版confetti(放礼花)包怎么写的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


很好玩,已 star

挺有意思的,star 了

在 Mac 上试了下是全屏的,理论上在任何平台都是全屏的,因为是在最顶层盖的 canvas

我的意思是能做到脱离 canvas 嘛(一个隐藏的 canvas , 不过可能需要 flutter 的多窗口支持了),类似这样 https://s1.locimg.com/2024/08/05/662c990ea219c.png

这个暂时没什么思路,回头研究下

这个暂时没什么思路,回头研究下

好看,有用,已 Star ,感谢🙏

Cool~ 顺带一提,Raycast 输入 Confetti 也有放礼花,非常好看,楼主可以看看也复刻一下 🎉

可以,有空了装了看看

在Flutter中实现一个类似于“放礼花(confetti)”效果的包,你可以遵循以下步骤来编写和发布一个自定义的Flutter包。以下是一个简要的指南:

  1. 环境设置: 确保你已经安装了Flutter和Dart SDK,并且你的开发环境配置正确。

  2. 创建包: 使用flutter create --template=package my_confetti命令创建一个新的Flutter包。my_confetti是你包的名称,你可以根据需要更改。

  3. 实现礼花效果

    • lib目录下创建一个confetti.dart文件,用于实现礼花效果的逻辑。
    • 使用CanvasCustomPainter来绘制礼花动画。
    • 你可以利用AnimationControllerTween来管理动画的时长和效果。
  4. 添加示例

    • example目录下,你可以创建一个Flutter应用来展示你的礼花效果包。
    • 修改example/lib/main.dart文件,引入并使用你的confetti.dart文件中的组件。
  5. 发布包

    • 编写README.md文件,说明你的包的功能和使用方法。
    • 更新pubspec.yaml文件,包含包的描述、依赖等信息。
    • 使用flutter pub publish命令将你的包发布到Dart Pub仓库。

请注意,这只是一个基本的指南,实际开发中可能需要处理更多的细节,如性能优化、错误处理等。希望这个指南能帮助你开始编写一个Flutter版的confetti包。

回到顶部