Cara Install dan Menggunakan Package Loading Animation Widget Pada Project Flutter Development

Hello people spirit of learning!

Dalam flutter, terdapat bermacam-macam jenis package yang bisa kita pakai. Salah satunya adalah Laoding Animation Widget, yang fungsinya membuat animasi loading menjadi lebih cantik. untuk tutorialnya kita langsung saja mulai ya.

1. Kunjungi Pub.dev

Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini.

2. Cari Keyword Loading Animation

3. Install package

Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini.

Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package.

4. Install Package

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';

void main(List<String> args) {
  runApp(MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isLoading = false;
  @override
  Widget build(BuildContext context) {
    return isLoading
        ? loading()
        : MaterialApp(
            home: Scaffold(
              body: Center(
                  child: ElevatedButton(
                      onPressed: () async {
                        setState(() {
                          isLoading = true;
                        });
                        await Future.delayed(Duration(seconds: 3));
                        setState(() {
                          isLoading = false;
                        });
                      },
                      child: Text('Load data'))),
            ),
          );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child:
                LoadingAnimationWidget.waveDots(color: Colors.blue, size: 100)),
      ),
    );
  }
}

Disini kita menggunakan 2 state ya yaitu Stateful dan Stateless. kita pakai stateful karena nantinya ada perubahan data jika kita melakukan action. Untuk membuat halaman loading kita bisa menggunakan stateless saja. kita bisa menggunakan packagenya dengan memanggil widget LoadingANimationWidget dan getter dengan jenis macam nama animasi loadingnya. dan setelah itu ada 2 properti yang harus diisi yaitu Color dan size. Fungsi dari masing-masing properti yaitu untuk mengatur warna dan ukuran pada animasi loading.

Setelah kita membuat halaman pada loading, Kita membuat statefulWidget. Kita buat var bertipe bool yang diisi dengan nilai false. Setelah kita membuat variable, Pada widget build stateful kita buat pekondisian, Jika loading maka Animasi Loading akan berjalan, Jika tidak maka tampilkan halaman khusus untuk Load data.

Pada button, kita buat fungsi saat ditekan maka akan ubah state menjadi true, Saat di klik maka akan loading selama 3 detik, Setelah 3 detik maka state akan berubah menjadi false.

Maka hasilnya akan seperti ini.

Terima kasih dan semoga bermanfaat!