Flutter Progress Indicator

Dalam aplikasi, progress indicator (indikator kemajuan) menunjukkan waktu yang dibutuhkan untuk menyelesaikan tugas seperti mengunduh, menginstal, mengunggah, dan mentransfer file. Indikator ini menunjukkan kemajuan tugas atau waktu yang dibutuhkan untuk menyelesaikan proses.

Dalam Flutter, progress indicator dapat ditampilkan dengan dua cara:

1. CircularProgressIndicator: menampilkan bilah kemajuan lingkaran yang berputar untuk menunjukkan bahwa aplikasi sedang sibuk atau ditangguhkan.
2. LinearProgressIndicator: menampilkan bilah kemajuan linear yang menunjukkan kemajuan aplikasi dalam arah linear atau sepanjang garis.

Ada 2 jenis progress indicator:

1. Indeterminate: Indikator kemajuan yang tidak menampilkan nilai spesifik pada setiap waktu dan hanya menunjukkan bahwa kemajuan sedang dilakukan. jenis ini tidak menunjukkan berapa banyak kemajuan yang harus dilakukan. Untuk membuat bilah kemajuan indeterminate, kita mengatur properti value menjadi null.
2. Determinate: Indikator kemajuan yang memiliki nilai spesifik pada setiap waktu. indikator jenis ini juga menunjukkan berapa banyak kemajuan yang diselesaikan. Nilai pada indikator kemajuan determinate meningkat monotonik dari 0 hingga 1, di mana 0 menunjukkan bahwa kemajuan baru saja dimulai dan 1 menunjukkan bahwa kemajuan telah selesai.

Berikut adalah langkah-langkah yang harus diikuti untuk menerapkan Indikator Kemajuan di aplikasi Flutter.

Langkah 1: Import paket material.dart agar dapat menampilkan widget Flutter Progress Indicator yang mengikuti panduan desain visual Material Design dari Google.

import 'package:flutter/material.dart';

Langkah 2: Selanjutnya, implementasikan kode berikut ke dalam file main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Loader(),
    );
  }
}

class Loader extends StatelessWidget {
  const Loader({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Nextgen Tutorial'),
        backgroundColor: Colors.blue,
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            CircularProgressIndicator(),
            SizedBox(
              height: 15,
            ),
            LinearProgressIndicator(),
          ],
        ),
      ),
    );
  }
}

Output:

Langkah 3: Sekarang, untuk meningkatkan antarmuka pengguna dari aplikasi ini, kita perlu mengimplementasikan beberapa properti penting dari progress bar.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Loader(),
    );
  }
}

class Loader extends StatelessWidget {
  const Loader({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Nextgen Tutorial'),
        backgroundColor: Colors.blue,
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            CircularProgressIndicator(
              backgroundColor: Colors.purpleAccent,
              valueColor: AlwaysStoppedAnimation(Colors.blue),
              strokeWidth: 10,
            ),
            SizedBox(
              height: 15,
            ),
            LinearProgressIndicator(
              backgroundColor: Colors.purpleAccent,
              valueColor: AlwaysStoppedAnimation(Colors.blue),
              minHeight: 20,
            ),
          ],
        ),
      ),
    );
  }
}

Output:

Penjelasan: 

Berikut adalah penjelasan kode di atas untuk mengimplementasikan Progress Indicator pada Flutter:

1. backgroundColor: Properti ini digunakan untuk menentukan warna latar belakang dari loader linear dan spinner bulat pada progress bar.
2. strokeWidth: Properti ini menentukan lebar garis yang digunakan untuk menggambar lingkaran pada CircularProgressIndicator.
3. minHeight: Ini adalah tinggi minimum garis yang digunakan untuk menggambar indikator pada LinearProgressIndicator atau dengan kata lain, digunakan untuk menentukan seberapa tebal garis pada indikator terlihat.
4. valueColor: Digunakan untuk mendefinisikan nilai progress indicator sebagai nilai animasi. Properti valueColor mencakup sorotan dari nilai tugas yang selesai.
5. AlwaysStoppedAnimation: Digunakan untuk menentukan warna konstan pada properti valueColor.
6. value: Properti ini digunakan untuk membedakan antara progress bar yang menampilkan kemajuan yang deterministik dan yang indeterministik. Jika properti value diatur sebagai null, maka indikator kemajuan tidak akan menunjukkan progress yang spesifik, melainkan akan menampilkan animasi yang telah ditentukan sebelumnya pada indikator tersebut. Jika properti value diatur sebagai non-null, maka indikator kemajuan akan menunjukkan seberapa banyak progress yang telah dicapai pada saat itu. Nilai 0,0 menunjukkan bahwa progress baru dimulai dan nilai 1,0 menunjukkan bahwa progress sudah selesai.

Tutorial sebelumnya : Flutter Dialog
Tutorial setelahnya : Flutter Staggered Grid View
Semua Tutorial Flutter : Tutorial Flutter