Kali ini kita akan membahas multiple loading indicator yang digunakan untuk status proses pada list data pada flutter.
Yuk kita langsung ke contoh codingannya.
Kita punya MAP datanya dulu seperti ini
var listMap = [
{
"nama": "Lesley",
"isLoad": false,
"id": 1
},
{
"nama": "Alucard",
"isLoad": false,
"id": 1
},
{
"nama": "Kagura",
"isLoad": false,
"id": 1
},
{
"nama": "Harley",
"isLoad": false,
"id": 1
}
];
Penyelesaian
-
Buat class dari model data tersebut
class Dataku { String? nama; bool? isLoad; int? id; Dataku({ required this.nama, required this.isLoad, required this.id, }); Dataku.fromJson(Map<String, dynamic> json) : nama = json['nama'], isLoad = json['isLoad'], id = json['id']; }
-
Convert
listMap
ke model data lalu panggil di initList<Dataku> listData = []; getListData() { listMap.forEach((element) { listData.add(Dataku.fromJson(element)); }); } @override void initState() { getListData(); super.initState(); }
-
Buat widget untuk menampilkan data
Widget namaHero(Dataku dataku) { return Card( child: Column( children: [ Text(dataku.nama ?? ""), (dataku.isLoad ?? false) ? const CircularProgressIndicator() : Container(), ElevatedButton(onPressed: ()=>loadHero(dataku), child: const Text("Load Hero")) ], ), ); }
-
Buat function untuk mengubah status
isLoad
menjadi berubah ubah.loadHero(Dataku dataku) { setState(() { dataku.isLoad = !(dataku.isLoad ?? false); }); }
-
Panggil widget
namaHero
di dalamListView.builder
ListView.builder( itemCount: listData.length, itemBuilder: (context, index) { return namaHero(listData[index]); }, )
dan begini penampakannya teman teman
dan begini full codingnya teman teman:
import 'package:flutter/material.dart';
class MultipleLoading extends StatefulWidget {
const MultipleLoading({Key? key}) : super(key: key);
@override
State<MultipleLoading> createState() => _MultipleLoadingState();
}
class _MultipleLoadingState extends State<MultipleLoading> {
var listMap = [
{"nama": "Lesley", "isLoad": false, "id": 1},
{"nama": "Alucard", "isLoad": false, "id": 1},
{"nama": "Kagura", "isLoad": false, "id": 1},
{"nama": "Harley", "isLoad": false, "id": 1}
];
List<Dataku> listData = [];
getListData() {
listMap.forEach((element) {
listData.add(Dataku.fromJson(element));
});
}
@override
void initState() {
getListData();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('MultipleLoading'),
),
body: ListView.builder(
itemCount: listData.length,
itemBuilder: (context, index) {
return namaHero(listData[index]);
},
),
);
}
Widget namaHero(Dataku dataku) {
return Card(
child: Column(
children: [
Text(dataku.nama ?? ""),
(dataku.isLoad ?? false)
? const CircularProgressIndicator()
: Container(),
ElevatedButton(onPressed: ()=>loadHero(dataku), child: const Text("Load Hero"))
],
),
);
}
void loadHero(Dataku dataku) {
setState(() {
dataku.isLoad = !(dataku.isLoad ?? false);
});
}
}
class Dataku {
String? nama;
bool? isLoad;
int? id;
Dataku({
required this.nama,
required this.isLoad,
required this.id,
});
Dataku.fromJson(Map<String, dynamic> json)
: nama = json['nama'],
isLoad = json['isLoad'],
id = json['id'];
}
Begitu dulu ya teman teman, semoga bermanfaat. Terima kasih.
✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi’i