Cara Membuat Skeleton Loading saat Menampilkan Data API di Flutter

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat skeleton loading saat menunggu data ditampilkan dari API pada flutter. Penasaran?, ayo ikuti tutorialnya di bawah ini?.

Baca Artikel Lain ✨

📰 1. Membuat Restful Api di Laravel Tanpa Library Tambahan Part 1 read more

📰 2. Menampilkan Data dengan API dan Token di Laravel Part 2 read more

📰 3. Cara Membuat Custom Registrasi dan Prosesnya di Laravel Part 1 read more

📰 4. Cara Membuat Custom Login di Laravel Part 2 read more

Cara Membuat Skeleton Loading saat Menampilkan Data dari API

1. Buatlah sebuah project flutter baru dengan nama yang kalian mau. Gunakan flutter versi terbaru atau gunakan versi yang support null safety.

2. Buka file pubspec.yaml lalu tambahkan package http: seperti gambar di bawah ini.

Mengunduh Paket

3. Buat file baru dengan nama skeleton_loading_widget.dart di dalam folder lib. Tampilan skeleton nantinya akan mengikuti tampilan card.

  import 'package:flutter/material.dart';

  class CardSkeletonLoading extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Card(
        child: ListTile(
          leading: Container(
            width: 80,
            height: 80,
            color: Colors.grey[300],
          ),
          title: Container(
            height: 16,
            width: double.infinity,
            color: Colors.grey[300],
          ),
          subtitle: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 5),
              Container(
                height: 16,
                width: 150,
                color: Colors.grey[300],
              ),
              SizedBox(height: 5),
              Container(
                height: 16,
                width: 100,
                color: Colors.grey[300],
              ),
              SizedBox(height: 5),
            ],
          ),
        ),
      );
    }
  }

Penjelasan script di atas:

1. Import Statement: Pada bagian ini, kita mengimpor pustaka Flutter yang diperlukan, yaitu 'package:flutter/material.dart'. Pustaka ini menyediakan komponen dan widget untuk membangun antarmuka pengguna dengan menggunakan Material Design.
2. SkeletonLoadingWidget Class: Ini adalah kelas Flutter yang ditentukan dengan nama "SkeletonLoadingWidget". Kelas ini merupakan turunan dari StatelessWidget, yang berarti widget ini tidak memiliki keadaan dan tidak berubah sepanjang siklus hidupnya.
3. build() Method: Metode ini merupakan bagian dari kelas SkeletonLoadingWidget dan digunakan untuk membangun hierarki widget yang membentuk tampilan widget ini. Metode ini harus mengembalikan sebuah Widget.
4. Card Widget: Widget Card digunakan untuk membuat konten dalam bentuk kartu, seperti dalam Material Design. Kartu ini akan berisi loading skeleton.
5. ListTile Widget: Widget ListTile digunakan untuk membuat konten dalam bentuk daftar dengan leading, title, dan subtitle. Di sini, konten kartu akan berisi widget ListTile.
6. leading Container: Container ini digunakan untuk menampilkan placeholder kotak berwarna abu-abu sebagai leading (gambar atau ikon di sebelah kiri) dalam ListTile. Kotak ini memiliki lebar dan tinggi sebesar 80.
7. title Container: Container ini digunakan untuk menampilkan placeholder kotak berwarna abu-abu sebagai judul dalam ListTile. Kotak ini memiliki tinggi 16 dan lebar yang mengisi seluruh lebar ListTile.
8. subtitle Column: Widget Column digunakan untuk mengatur widget dalam bentuk kolom. Di sini, konten kartu akan berisi kolom subtitle yang berisi beberapa Container sebagai placeholder untuk teks.
9. Container: Kontainer ini digunakan untuk menampilkan placeholder kotak berwarna abu-abu sebagai subtitle dalam ListTile. Kotak-kotak ini memiliki tinggi 16 dan lebar yang berbeda-beda.

4. Buka lib/main.dart lalu ganti dengan script di bawah ini.

  import 'dart:convert';

  import 'package:flutter/material.dart';
  import 'package:http/http.dart' as http;
  
  import 'skeleton_loading_widget.dart';
  
  void main() {
    runApp(UserListPage());
  }
  
  class UserListPage extends StatelessWidget {
    Future<List<dynamic>> fetchUsers() async {
      final response = await http.get(Uri.parse(
          'https://dummyjson.com/users')); // Mengambil data dari dummy.json
  
      if (response.statusCode == 200) {
        final jsonData = jsonDecode(response.body);
        return jsonData['users'];
      } else {
        throw Exception('Failed to load users');
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('User List'),
          ),
          body: FutureBuilder<List<dynamic>>(
            future: fetchUsers(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                final users = snapshot.data;
                return ListView.builder(
                  itemCount: users?.length,
                  itemBuilder: (context, index) {
                    final user = users![index];
                    return Card(
                      child: ListTile(
                        leading: Image.network(
                          user['image'], 
                          fit: BoxFit.cover, 
                          width: 80, 
                          height: 80,
                        ),
                        title: Text(
                          user['firstName'],
                          style: TextStyle(fontWeight: FontWeight.w500),
                        ),
                        subtitle: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            SizedBox(height: 5),
                            Text(user['email']),
                            Text(user['phone']),
                            SizedBox(height: 5),
                          ],
                        ),
                      ),
                    );
                  },
                );
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                return ListView.builder(
                  itemCount: 10, // Jumlah skeleton loading yang ingin ditampilkan
                  itemBuilder: (context, index) {
                    return SkeletonLoadingWidget();
                  },
                );
              }
            },
          ),
        ),
      );
    }
  }

Ok, semua step sudah kita kerjakan. Saatnya kita melakukan uji coba. Silahkan jalankan emulator dan jika berhasil maka tampilannya akan terlihat seperti gambar di bawah ini.

    

Ok sekian tutorial cara membuat skeleton loading saat menampilkan data dari API di flutter. Semoga tutorial singkat ini bermanfaat. Jika ada yang ingin ditanyakan, silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima gaji.