Flutter波浪加载指示器插件 `wave_loading_indicator` 的使用

概述

wave_loading_indicator 是一个可定制的波浪进度条小部件，非常适合用于展示加载进度或状态。

预览效果

以下是插件的效果预览图：

Example 1 Example 2

如何使用

1. 添加依赖

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

dependencies:
  wave_loading_indicator: ^1.0.7

2. 导入库

在 Dart 文件中导入该库：

import 'package:wave_loading_indicator/wave_progress.dart';

3. 使用 WaveProgress 小部件

您可以在需要的地方直接添加 WaveProgress 小部件，并根据需要自定义边框颜色、填充颜色等属性：

WaveProgress(
  borderSize: 3.0, 
  size: 180, 
  borderColor: Colors.redAccent,
  foregroundWaveColor: Colors.greenAccent,
  backgroundWaveColor: Colors.blueAccent,
  progress: _progress, // [0-100]
  innerPadding: 10, // 边框与波浪之间的内边距
),

示例代码

下面是一个完整的示例应用，演示了如何使用 wave_loading_indicator 插件：

import 'package:flutter/material.dart';
import 'package:wave_loading_indicator/wave_progress.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _progress = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: WaveProgress(
          borderSize: 3.0,
          size: 180,
          borderColor: Colors.redAccent,
          foregroundWaveColor: Colors.greenAccent,
          backgroundWaveColor: Colors.blueAccent,
          progress: _progress,
          innerPadding: 10,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }

  void _incrementCounter() {
    setState(() {
      _progress += 10;
      if (_progress > 100) {
        _progress = 0;
      }
    });
  }
}

此示例展示了如何创建一个简单的 Flutter 应用程序，并在其中集成 WaveProgress 小部件。点击浮动按钮会增加进度值，当进度超过100时，它将重置为0。这样可以帮助您理解如何在实际项目中使用这个插件。

更多关于Flutter波浪加载指示器插件wave_loading_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

caililin 1楼•1 天前作者

更多关于Flutter波浪加载指示器插件wave_loading_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用wave_loading_indicator插件的示例代码。这个插件提供了一个波浪形状的加载指示器，非常适合用于显示加载状态的场景。

首先，你需要在你的pubspec.yaml文件中添加这个插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  wave_loading_indicator: ^x.y.z  # 请将 x.y.z 替换为实际的版本号

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

接下来，你可以在你的Flutter应用中使用这个波浪加载指示器。下面是一个简单的示例，展示了如何在Scaffold的body中使用WaveLoadingIndicator：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Wave Loading Indicator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoadingIndicatorScreen(),
    );
  }
}

class LoadingIndicatorScreen extends StatefulWidget {
  @override
  _LoadingIndicatorScreenState createState() => _LoadingIndicatorScreenState();
}

class _LoadingIndicatorScreenState extends State<LoadingIndicatorScreen> with SingleTickerProviderStateMixin {
  bool isLoading = true; // 控制加载指示器的显示和隐藏

  @override
  void initState() {
    super.initState();
    // 模拟一个加载过程，2秒后停止加载
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wave Loading Indicator Demo'),
      ),
      body: Center(
        child: isLoading
            ? WaveLoadingIndicator(
                size: 50.0,
                waveCount: 3,
                waveColor: Colors.blue,
                backgroundColor: Colors.grey[200],
                animationDuration: Duration(seconds: 1),
              )
            : Text('Loading Complete!'),
      ),
    );
  }
}

在这个示例中：

WaveLoadingIndicator 被用于显示加载状态。
size 属性设置波浪的大小。
waveCount 属性设置波浪的数量。
waveColor 属性设置波浪的颜色。
backgroundColor 属性设置波浪加载指示器的背景颜色。
animationDuration 属性设置波浪动画的持续时间。

通过isLoading状态变量，我们控制加载指示器的显示和隐藏。在initState方法中，我们使用Future.delayed来模拟一个加载过程，2秒后停止加载并更新isLoading状态，从而隐藏加载指示器并显示“Loading Complete!”文本。

你可以根据需要调整这些属性，以适应你的应用场景。

Flutter波浪加载指示器插件wave_loading_indicator的使用

Flutter波浪加载指示器插件 wave_loading_indicator 的使用