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 分類

安裝套件