Flutter加载动画插件wave_loading_bubble的使用

Wave Loading Bubble

一个带有波浪效果的自定义加载动画。

特性

  • 可定制化的波浪加载气泡动画
  • 使用自动化动画器，易于集成

开始使用

要使用此插件，只需在 pubspec.yaml 文件中添加 wave_loading_bubble 作为依赖项。

dependencies:
  wave_loading_bubble: ^0.0.1

执行 flutter pub get 后即可使用该插件。

示例代码

以下是一个完整的示例代码，展示如何在 Flutter 应用中使用 wave_loading_bubble 插件。

import 'package:flutter/material.dart';
import 'package:wave_loading_bubble/wave_loading_bubble.dart'; // 引入插件

void main() {
  runApp(MyApp()); // 主函数入口
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp( // 创建MaterialApp实例
      title: 'Wave Loading Bubble Example', // 设置应用标题
      home: WaveLoadingBubbleExample(), // 设置主页
    );
  }
}

class WaveLoadingBubbleExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold( // 创建Scaffold布局
      appBar: AppBar( // 设置顶部栏
        title: Text('Wave Loading Bubble Example'), // 设置顶部栏标题
      ),
      body: Center( // 设置页面居中
        child: AutomatedAnimator( // 使用自动化动画器
          animateToggle: true, // 开启动画
          doRepeatAnimation: true, // 循环播放动画
          buildWidget: (animationValue) { // 定义动画回调
            return WaveLoadingBubble( // 创建波浪加载气泡
              bubbleDiameter: 200.0, // 设置气泡直径
              waveHeight: 10.0, // 设置波浪高度
              foregroundWaveColor: Colors.lightBlue, // 设置前景波浪颜色
              backgroundWaveColor: Colors.blue, // 设置背景波浪颜色
              period: animationValue, // 动画周期
            );
          },
        ),
      ),
    );
  }
}

更多关于Flutter加载动画插件wave_loading_bubble的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter加载动画插件wave_loading_bubble的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


wave_loading_bubble 是一个用于 Flutter 的加载动画插件，它提供了一个波浪形的加载动画，通常用于表示加载或等待的状态。以下是如何在 Flutter 项目中使用 wave_loading_bubble 插件的步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 wave_loading_bubble 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  wave_loading_bubble: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 wave_loading_bubble 包。

import 'package:wave_loading_bubble/wave_loading_bubble.dart';

3. 使用 WaveLoadingBubble

你可以在你的 Flutter 应用中使用 WaveLoadingBubble 组件来显示加载动画。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Wave Loading Bubble Example'),
        ),
        body: Center(
          child: WaveLoadingBubble(
            size: 100.0, // 设置波浪的大小
            color: Colors.blue, // 设置波浪的颜色
          ),
        ),
      ),
    );
  }
}

4. 自定义属性

WaveLoadingBubble 提供了一些可自定义的属性，你可以根据需要调整它们：

  • size: 波浪的大小，默认值为 100.0。
  • color: 波浪的颜色，默认值为 Colors.blue。
  • duration: 动画的持续时间，默认值为 Duration(seconds: 2)。
  • waveHeight: 波浪的高度，默认值为 20.0。
  • waveCount: 波浪的数量，默认值为 3。

例如：

WaveLoadingBubble(
  size: 150.0,
  color: Colors.red,
  duration: Duration(seconds: 1),
  waveHeight: 30.0,
  waveCount: 5,
)

5. 运行应用

现在你可以运行你的 Flutter 应用，看到 WaveLoadingBubble 的加载动画效果。

6. 其他注意事项

  • 如果你需要更复杂的动画效果，可以结合其他 Flutter 动画库或自定义动画来实现。
  • wave_loading_bubble 插件通常用于简单的加载场景，如果你需要更复杂的加载动画，可能需要考虑其他插件或自定义实现。

7. 示例代码

以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Wave Loading Bubble Example'),
        ),
        body: Center(
          child: WaveLoadingBubble(
            size: 150.0,
            color: Colors.red,
            duration: Duration(seconds: 1),
            waveHeight: 30.0,
            waveCount: 5,
          ),
        ),
      ),
    );
  }
}
回到顶部