Flutter Animation Progress Bar

Bar Kemajuan Animasi Terbakar

Paket widget flutter penuh warna ini bertujuan untuk menunjukkan bilah kemajuan animasi dengan gaya reaktif. Ini juga mendukung bilah vertikal dan horizontal.

Kontes Buat Flutter

Paket ini juga merupakan kiriman untuk Kontes Create Flutter. Aturan dasar dari kontes ini adalah untuk mengukur ukuran file panah total kurang atau sama dengan 5kb.

Setelah membuka ritsleting file terkompresi, jalankan perintah berikut untuk memperbarui dependensi:

 flutter packages get

Untuk mengevaluasi ukuran total semua file panah:

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

Untuk hanya mengevaluasi kode Paket DART:

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

Untuk menjalankan aplikasi contoh sederhana dengan ukuran total kode DART kurang atau sama dengan 5kb:

 cd example
flutter clean
flutter run

Aplikasi restart panas dengan "r" untuk mengulangi animasi

Untuk menjalankan aplikasi contoh lengkap:

 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

Menggunakan tombol aksi float bawaan untuk mengubah nilai dan melihat efeknya

Memulai

Untuk menggunakan paket ini, impor

 import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart' ;

Implementasi dasar dapat dilakukan seperti kode di bawah ini:

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

Contoh aplikasi

Anda dapat menemukan lebih banyak contoh dari Contoh Aplikasi

API

Di tabel ini, Anda dapat menemukan semua atribut yang disediakan oleh paket ini:

Atribut	Nilai default	Keterangan
CurrentValue	0	Atur nilai saat ini untuk bilah kemajuan. Nilai ini harus dalam stateful sehingga setiap kali setState () telah dipanggil, bilah kemajuan akan memicu animasi dari Value Current terbaru ke NEW CurrentValue
MaxValue	100	Nilai maksimal yang akan ditampilkan sebagai bilah progres. Nilai saat ini bisa lebih besar dari nilai maksimal
ukuran	30	Tinggi batang jika arah dalam sumbu.horizontal. Lebar batang jika arah dalam sumbu.vertikal
AnimatedDuration	durasi const (milidetik: 300)	Atur durasi untuk siklus animasi
arah	Axis.Horizontal	Bilah dapat berada di poros .
VerticalDirection	VerticalDirection.down	Dengan arah vertikal, bilah dapat berupa sireksi vertikal.
Borderradius	8	Atur radius perbatasan batang
berbatasan	null	Atur gaya Bar Border oleh Boxborder
latar belakang warna	warna const (0x00ffffff)	Atur warna latar belakang batang
ProgressColor	Warna const (0xfffa7268)	Atur warna progres bilah
ProgresGradient	null	Atur gradien kemajuan bar. Mengesampingkan progressColor
ChangeColorValue	null	Tetapkan nilai yang harus diubah warna kemajuan [0 --- biru ---- [ 70 ] -red-100]
ChangeProgressColor	Warna const (0xff5f4b8b)	Warna warna yang berkembang akan diubah menjadi, kapan pun nilai lancar lebih besar dari changeColorValue
displayText	null	Teks untuk ditampilkan milik CurrentValue. Contoh: % -> 20% °F -> 80°F
DisplayTextStyle	...	TextStyle of DisplayText

Objek

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

Masukan

Jangan ragu untuk meninggalkan umpan balik untuk membantu mendukung paket ini?