Flutter浮动气泡效果插件floating_bubbles的使用

简介

floating_bubbles 是一个Flutter插件，用于在Widget的前景中添加浮动气泡效果。它可以创建动态的气泡动画，并且可以根据需要设置为一次性播放或一直重复播放。

获取开始

添加依赖

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

dependencies:
  floating_bubbles: ^2.6.2

导入包

在Dart文件中导入包：

import 'package:floating_bubbles/floating_bubbles.dart';

使用方法

以下是使用 FloatingBubbles 和 FloatingBubbles.alwaysRepeating 的示例代码。

创建 FloatingBubbles（一次性播放）

此方法创建一个动画并在给定的时间内播放。

return Stack(
  children: [
    Positioned.fill(
      child: Container(
        color: Colors.red,
      ),
    ),
    Positioned.fill(
      child: FloatingBubbles(
        noOfBubbles: 25,
        colorsOfBubbles: [
          Colors.green.withAlpha(30),
          Colors.red,
        ],
        sizeFactor: 0.16,
        duration: 120, // 120 seconds.
        opacity: 70,
        paintingStyle: PaintingStyle.stroke,
        strokeWidth: 8,
        shape: BubbleShape.circle, // circle is the default. No need to explicitly mention if its a circle.
        speed: BubbleSpeed.normal, // normal is the default
      ),
    ),
  ],
);

创建 FloatingBubbles.alwaysRepeating（一直重复播放）

此方法创建一直浮动的气泡，不会停止。

return Stack(
  children: [
    Positioned.fill(
      child: Container(
        color: Colors.red,
      ),
    ),
    Positioned.fill(
      child: FloatingBubbles.alwaysRepeating(
        noOfBubbles: 25,
        colorsOfBubbles: [
          Colors.green.withAlpha(30),
          Colors.red,
        ],
        sizeFactor: 0.16,
        opacity: 70,
        paintingStyle: PaintingStyle.fill,
        shape: BubbleShape.square,
        speed: BubbleSpeed.normal,
      ),
    ),
  ],
);

参数说明

创建 FloatingBubbles() 的参数

创建 FloatingBubbles.alwaysRepeating() 的参数

示例代码

下面是一个完整的示例代码，展示了如何使用 floating_bubbles 插件创建浮动气泡效果。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      showPerformanceOverlay: true,
      home: Scaffold(
        body: HomePage(),
      ),
    );
  }
}

// Simple example.
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(
          child: Container(
            color: Colors.blue,
          ),
        ),
        Positioned.fill(
          child: FloatingBubbles.alwaysRepeating(
            noOfBubbles: 50,
            colorsOfBubbles: const [
              Colors.white,
              Colors.red,
            ],
            sizeFactor: 0.2,
            opacity: 70,
            speed: BubbleSpeed.slow,
            paintingStyle: PaintingStyle.fill,
            shape: BubbleShape.circle, //This is the default
          ),
        ),
      ],
    );
  }
}

支持平台

• Android: 支持，无问题
• iOS: 支持，无问题
• Web: 支持（需使用HTML渲染器）
• Windows: 支持，无问题
• Linux: 尚未测试
• macOS: 尚未测试

性能测试

该插件已经进行了性能测试，确保在不同设备上的表现良好。详细信息可以参考官方文档中的性能测试部分。

关于作者和支持

如果你喜欢这个插件，请在GitHub上给它一个星🌟。有任何建议或问题，欢迎提交issue或pull request。

许可证

本项目下的脚本和文档均遵循MIT许可证，详情请参阅 LICENSE 文件。

希望这些信息对你有所帮助！如果有任何问题，欢迎随时提问。