Package percent_indicator adalah sebuah paket (package) Flutter yang menyediakan widget untuk menampilkan indikator persentase atau progress bar dengan berbagai gaya dan konfigurasi yang dapat disesuaikan.
Beberapa fitur utama yang ditawarkan oleh paket percent_indicator adalah:
- Tampilan Indikator Persentase
Paket ini menyediakan widget CircularPercentIndicator dan LinearPercentIndicator yang dapat digunakan untuk menampilkan indikator persentase dalam bentuk lingkaran atau garis lurus.
- Konfigurasi dan Gaya yang Dapat Disesuaikan
kita dapat mengatur banyak opsi dan properti untuk menyesuaikan tampilan indikator persentase sesuai kebutuhan kita. Beberapa konfigurasi yang dapat kita ubah termasuk warna, ukuran, teks, animasi, dan sebagainya.
- Teks dan Label yang Dapat Disesuaikan
kita dapat menambahkan teks atau label ke indikator persentase untuk memberikan informasi tambahan. kita dapat mengatur format, gaya, dan penempatan teks sesuai keinginan kita.
- Animasi
Paket ini menyediakan opsi untuk menganimasikan perubahan persentase, termasuk animasi transisi dan efek yang dapat disesuaikan.
- Berbagai Tipe Indikator
kita dapat memilih antara tampilan lingkaran atau garis lurus sebagai indikator persentase. Selain itu, paket ini juga mendukung indikator persentase dengan gaya seperti neumorphic atau circular fill.
Untuk menggunakan paket percent_indicator dalam proyek Flutter kita, ikuti langkah-langkah berikut:
Tambahkan dependensi paket percent_indicator ke file pubspec.yaml proyek Flutter kita:
dependencies:
percent_indicator: ^4.2.3
Jalankan perintah flutter packages get untuk mengunduh dan menginstal paket. Kemudian import paket ke dalam file Dart tempat kita ingin menggunakan indikator persentase:
import 'package:percent_indicator/percent_indicator.dart';
Kemudian Gunakan widget CircularPercentIndicator atau LinearPercentIndicator sesuai dengan kebutuhan kita. kita dapat mengatur properti dan konfigurasi sesuai dengan preferensi kita.
CircularPercentIndicator(
radius: 100.0,
lineWidth: 10.0,
percent: 0.75,
center: Text("75%"),
progressColor: Colors.blue,
)
LinearPercentIndicator(
width: 200.0,
lineHeight: 20.0,
percent: 0.5,
center: Text("50%"),
progressColor: Colors.green,
)
Kemudian sesuaikan konfigurasi dan properti indikator persentase sesuai kebutuhan kita untuk mencapai tampilan yang diinginkan.
Dengan menggunakan paket ini, kita dapat dengan mudah menampilkan indikator persentase atau progress bar yang menarik dan dapat disesuaikan dalam proyek Flutter kita.