Flutter Animation Progress Bar
1.0.0
このカラフルなフラッターウィジェットパッケージは、リアクティブなスタイルでアニメーションの進行状況バーを表示することを目的としています。また、垂直と水平の両方のバーもサポートします。
このパッケージは、Flutter Creating Contestの提出物でもあります。このコンテストの基本的なルールは、5kbの少ないまたは等しいDARTファイルサイズを測定することです。
圧縮されたファイルを解凍した後、次のコマンドを実行して依存関係を更新します。
flutter packages get
すべてのDARTファイルの合計サイズを評価するには：
find . -name "*.dart" ! -name "*test*" | xargs cat | wc -c
パッケージDARTコードのみを評価するには：
find . -name "*.dart" ! -name "*test*" ! -path "*example*" | xargs cat | wc -c
DARTコードの合計サイズが少ないまたは等しい5kbを持つ単純な例アプリを実行するには：
cd example
flutter clean
flutter run
アニメーションを再生する「R」を備えたホット再起動アプリ
完全なサンプルアプリを実行するには：
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
ビルトインフロートアクションボタンを使用して価値を変更して効果を確認する
このパッケージを使用するには、インポートしてください
import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart' ;基本的な実装は、以下のコードのように実行できます。
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 : '%' ,
)),
);
}サンプルアプリからより多くの例を見つけることができます
この表には、このパッケージで提供されるすべての属性を見つけることができます。
| 属性 | デフォルト値 | 説明 |
|---|---|---|
| currentValue | 0 | Progress Barの現在の値を設定します。この値は、 SetState（）が呼び出されるたびに、進行状況バーが最新のCurrentValueから新しいCurrentValueにアニメーションをトリガーするように、ステートフルにする必要があります |
| MaxValue | 100 | プログレスバーとして表示される最大値。 現在の値は最大値よりも大きくなる場合があります |
| サイズ | 30 | Axis.horizontalの方向の場合のバーの高さ。 軸の方向の場合、バー幅 |
| AnimatedDuration | const持続時間（ミリ秒：300） | アニメーションサイクルの期間を設定します |
| 方向 | axis.horizontal | バーは、 axis.horizontalまたはaxis.vertical方向にあります |
| 垂直方向 | VerticalDirection.Down | 垂直方向に、バーは垂直方向または垂直方向になります。 |
| borderradius | 8 | バーの境界半径を設定します |
| 国境 | null | BoxBorderによってバーボーダースタイルを設定します |
| BackgroundColor | const color（0x00ffffff） | バーの背景色を設定します |
| ProgressColor | const Color（0xfffa7268） | バーの進行中の色を設定します |
| ProgressGradient | null | バーの進行勾配を設定します。 progressColorをオーバーライドします |
| ChangeColorValue | null | 変化する色を変更する値を設定します [0 ---青---- [ 70 ] -Red-100] |
| candyprogresscolor | const color（0xff5f4b8b） | CurrentValueがChangeColorValueよりも大きい場合は、進行中の色が変更されます |
| displayText | null | currentValueで帰属するテキスト。 例： % - > 20%°F > 80°F |
| DisplayTextStyle | ... | DisplayTextのTextStyle |
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;
}このパッケージをサポートするのに役立つフィードバックをお気軽にご切れにしてください。
