パッケージ詳細v2.3.1

flutter_animation_progress_bar

このカラフルなFlutterウィジェットパッケージは、リアクティブスタイルでアニメーションプログレスバーを表示することを目的としています。垂直方向と水平方向のバーの両方に対応しています。

AndroidiOSWebmacOSWindowsLinux

pub.dev API ドキュメントソースコード

30日間ダウンロード: 2.8万
いいね数: 237
Pub ポイント: 125

パッケージをインストール

flutter pub add flutter_animation_progress_bar

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

水平および垂直方向のアニメーション付きプログレスバーを提供する活気あるFlutterパッケージです。リアクティブなスタイルで設計されており、進行状況の値をスムーズに更新し、すべての主要プラットフォームでリアルタイムの視覚フィードバックをサポートしています。ローディングインジケーター、タスク完了の追跡、または動的な進行状況の可視化が必要な任意のUI要素に最適です。このパッケージは軽量でカスタマイズ可能であり、Flutterアプリにシームレスに統合できます。

用途

ロード画面
タスク完了インジケーター
フォームの進行状況のトラッキング
インタラクティブなチュートリアル
ゲーム進行状況バー

主な機能

水平および垂直方向のサポート
リアクティブなアニメーションの更新
カラフルでカスタマイズ可能なデザイン
クロスプラットフォーム互換性
スムーズなトランジションアニメーション
pub を通したシンプルな統合

適している対象

インタラクティブなUIを構築する開発者
視覚的な進行状況フィードバックが必要なアプリ
アニメーションインジケーターを探しているデザイナー
クロスプラットフォーム Flutter プロジェクト
豊かなビジュアルを備えた最小限のセットアップを希望するユーザー

注意事項

ダークモード用に追加のスタイリングが必要になる場合があります
高頻度の更新によるパフォーマンスへの影響
基本的なプロパティ以外のカスタマイズは限定的です
非常に大きな進捗値に対して最適化されていません
Flutterのアニメーションエンジンの安定性に依存します

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

Flutter Animation Progress Bar

This colorful Flutter widget package aims to show an animation progress bar in reactive style. It also supports both vertical and horizontal bar.

Flutter Create Contest

This package is also a submission to Flutter Create contest. The basic rule of this contest is to measure the total Dart file size less or equal 5KB.

After unzipping the compressed file, run following command to update dependencies:

flutter packages get

To evaluate the total size of all Dart files:

find . -name "*.dart" ! -name "*test*"  | xargs cat | wc -c

To evaluate only the package Dart code:

find . -name "*.dart" ! -name "*test*" ! -path "*example*"  | xargs cat | wc -c

To run simple example app with a total size of dart code less or equal 5KB:

cd example
flutter clean
flutter run

Hot restart app with "R" to replay the animation

To run the full example app:

cd example
mv lib/main.dart tmp && mv lib/main.dart.bk lib/main.dart && mv tmp lib/main.dart.bk
flutter clean
flutter run

Using built-in float action buttons to change value and see the effect

Getting Started

In order to use this package, do import

import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart';

Basic implementation can be done like below code:

import 'package:flutter/widgets.dart';
import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart';

void main() {
  runApp(
    Center(
        child: FAProgressBar(
      currentValue: 80,
      displayText: '%',
    )),
  );
}

Example App

You can find more examples from Example App

API

In this table, you can find all attributes provided by this package:

Attribute	Default value	Description
currentValue	0	Set the current value for progress bar. This value should be in stateful so that whenever setState() has been called, the progress bar will trigger an animation from latest currentValue to new currentValue
maxValue	100	Max value to be displayed as progress bar. Current value can be greater than max value
size	30	The bar height if direction in Axis.horizontal. The bar width if direction in Axis.vertical
animatedDuration	const Duration(milliseconds: 300)	Set the duration for an animation cycle
direction	Axis.horizontal	The bar can be in Axis.horizontal or Axis.vertical direction
verticalDirection	VerticalDirection.down	With vertical direction, the bar can be VerticalDirection.up or VerticalDirection.down direction
borderRadius	8	Set the bar border radius
border	`null`	Set the bar border style by BoxBorder
backgroundColor	const Color(0x00FFFFFF)	Set the bar background color
progressColor	const Color(0xFFFA7268)	Set the bar progressing color
progressGradient	`null`	Set the bar progressing gradient. Overrides `progressColor`
changeColorValue	`null`	Set a value that progress color should be changed to [0---blue----[70]-red-100]
changeProgressColor	const Color(0xFF5F4B8B)	Color that progressing color will be changed to, whenever currentValue greater than changeColorValue
displayText	`null`	Text to display belonging with currentValue. Examples: `%` -> `20%` `°F` -> `80°F`
displayTextStyle	...	TextStyle of displayText

Objects

class FAProgressBar {

  final double currentValue;
  final double maxValue;
  final double size;
  final Duration animatedDuration;
  final Axis direction;
  final VerticalDirection verticalDirection;
  final double borderRadius;
  final BoxBorder border;
  final Color backgroundColor;
  final Color progressColor;
  final Gradient progressGradient;
  final int changeColorValue;
  final Color changeProgressColor;
  final String displayText;
  final TextStyle displayTextStyle;
}