wave_progress_bars

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

WaveProgressBars 是一个 Flutter 包，可简化将动画波浪形进度条集成到应用程序中的过程。它提供流畅、自然的波浪动画，以视觉方式表示加载或进度状态。非常适合现代用户界面，通过动态且引人入胜的指示器提升用户体验。该包轻量且易于实现，配置需求极少。支持自定义波浪颜色、速度和振幅，以满足设计需求。

适合场景

表单中的加载指示器
数据获取期间的视觉反馈
互动式应用引导
动画进度跟踪
游戏化应用元素

主要特点

平滑波浪动画
可自定义的波浪颜色
可调节波速
可配置的振幅
简单 API 集成
轻量且高效

适合对象

现代应用程序界面
用户参与功能
加载状态可视化
注重设计的开发者
需要唯一进度指示器的应用程序

使用建议

仅限波浪样式进度
无内置的 iOS/Android 平台特定样式支持
在低端设备上可能需要性能调优
不适用于复杂的进度跟踪场景

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Wave Progress Bars

A package provides an easy way to add wave bars in Flutter project.

Getting Started

You should ensure that you add the following dependency in your Flutter project.

dependencies:
  wave_progress_bars: "^0.0.1"

You should then run flutter packages upgrade or update your packages in IntelliJ.

How to use

import 'package:wave_progress_bars/wave_progress_bars.dart';
import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(
      MaterialApp(
        title: 'Bars',
        theme: ThemeData(),
        home: MyApp(),
      ),
    );

class MyApp extends StatelessWidget {
  final List<double> values = [];

  @override
  Widget build(BuildContext context) {
    MediaQueryData queryData = MediaQuery.of(context);
    var rng = new Random();
    for (var i = 0; i < 100; i++) {
      values.add(rng.nextInt(70) * 1.0);
    }
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        centerTitle: true,
        title: Text("bars"),
      ),
      body: Center(
        child: WaveProgressBar(
          progressPercentage: 20,
          listOfHeights: values,
          width: queryData.size.width,
          initalColor: Colors.grey,
          progressColor: Colors.red,
          backgroundColor: Colors.white,
          timeInMilliSeconds: 2000,
          isHorizontallyAnimated: true,
          isVerticallyAnimated: true,
        ),
      ),
    );
  }
}

搜索插件、代码仓与 APP 分类

安装插件