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
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:
- 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.
- 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.
- 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.
- Card Widget: Widget Card digunakan untuk membuat konten dalam bentuk kartu, seperti dalam Material Design. Kartu ini akan berisi loading skeleton.
- ListTile Widget: Widget ListTile digunakan untuk membuat konten dalam bentuk daftar dengan leading, title, dan subtitle. Di sini, konten kartu akan berisi widget ListTile.
- 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.
- 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.
- 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.
- 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.
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi