Flutter Animation Progress Bar

撲動動畫進度欄

這個五顏六色的小部件軟件包旨在以反應性樣式顯示動畫進度欄。它還支持垂直和水平條。

撲來創造競賽

此軟件包也是撲打創建比賽的提交。本次比賽的基本規則是測量較小或等於5KB的總飛鏢文件大小。

解壓縮壓縮文件後，運行以下命令以更新依賴項：

 flutter packages get

評估所有飛鏢文件的總尺寸：

 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 : '%' ,
    )),
  );
}

示例應用程序

您可以從示例應用程序中找到更多示例

API

在此表中，您可以找到此軟件包提供的所有屬性：

屬性	預設值	描述
電流值	0	設置進度欄的當前值。該值應該以狀態為單位，以便每當調用setState（）時，進度條將觸發從最新CurrentValue到New CurrentValue的動畫
MaxValue	100	最大值將顯示為進度欄。 當前值可能大於最大值
尺寸	30	桿高，如果方向在軸上。 桿寬如果軸的方向。
動畫	固定持續時間（毫秒：300）	將持續時間設置為動畫週期
方向	Axis.Horizo​​ntal	條形可以在軸上。 Horizo​​ntal或Axis。垂直方向
垂直方向	垂直導向	在垂直方向上，條可以是垂直方向。 UP或垂直方向。
Borderradius	8	設置條形邊界半徑
邊界	null	通過BoxBorder設置條形邊界樣式
背景色	const顏色（0x00ffffff）	設置條背景顏色
ProgressColor	const顏色（0xfffa7268）	設置欄的進度顏色
進度級	null	設置條形進展梯度。覆蓋progressColor
ChangeColorValue	null	設置一個值，應將進度顏色更改為 [0 ---藍色---- [ 70 ] -RED-100]
ChangeProgressColor	const顏色（0xff5f4b8b）	每當電流值大於changeColorValue時，進展的顏色將更改為
DisplayText	null	帶有CurrentValue的文本。 示例： % - > 20% °F > 80°F
DisplayTextStyle	...	DisplayText的文本風格

對象

 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;
}

回饋

隨時留下任何反饋以幫助支持此軟件包嗎？