Flutter Animation Progress Bar 다운로드 - Flutter Animation Progress Bar 소스 코드 다운로드

Flutter Animation Progress Bar

기타 소스코드

1.0.0

다운로드

플러터 애니메이션 진행률 바

이 화려한 플러터 위젯 패키지는 반응 스타일로 애니메이션 진행 막대를 보여주는 것을 목표로합니다. 또한 수직 및 수평 막대를 모두 지원합니다.

Flutter Create Contest

이 패키지는 또한 Flutter Create Contest에 제출 된 제출입니다. 이 컨테스트의 기본 규칙은 총 다트 파일 크기를 5KB 또는 동일하게 측정하는 것입니다.

압축 파일을 삭제 한 후 명령을 따라 실행하여 종속성을 업데이트하십시오.

 flutter packages get

모든 다트 파일의 총 크기를 평가하려면 다음과 같습니다.

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

패키지 다트 코드 만 평가하려면 :

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

총 크기의 다트 코드가 작거나 동일한 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

이 표 에서이 패키지에서 제공하는 모든 속성을 찾을 수 있습니다.

기인하다	기본값	설명
CurrentValue	0	진행률 표시 줄에 대한 현재 값을 설정하십시오. 이 값은 SetState ()가 호출 될 때마다 진행률 표시 줄이 최신 CurrentValue 에서 New CurrentValue 로 애니메이션을 트리거하도록 상태 에 있어야합니다.
MaxValue	100	최대 값은 진행률 표시 줄로 표시됩니다. 현재 값은 최대 값보다 클 수 있습니다
크기	30	축의 방향 인 경우 막대 높이. 축의 막대 너비
애니메이션	const 기간 (밀리 초 : 300)	애니메이션주기의 지속 시간을 설정하십시오
방향	Axis.horizontal	막대는 축 으로 일 수 있습니다
수직 방향	수직 방향	수직 방향으로 막대는 수직 방향이 될 수 있습니다. UP 또는 수직 방향.
Borderradius	8	막대 경계 반경을 설정하십시오
국경	`null`	Boxborder 가 막대 테두리 스타일을 설정하십시오
배경 검색	const color (0x00ffffff)	막대 배경색을 설정하십시오
ProgressColor	const color (0xfffa7268)	막대를 진행하는 색상을 설정하십시오
진보적 인	`null`	막대가 진행되는 그라디언트를 설정하십시오. `progressColor` 무시합니다
ChangecolorValue	`null`	진행 색상을 변경 해야하는 값을 설정하십시오. [0 --- 블루 ---- [ 70 ] -Red-100]
changeprogressColor	const color (0xff5f4b8b)	CurrentValue가 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;
}