Flutter Multiple Loading Indicator

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

1. 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'];
       }
   

2. Convert listMap ke model data lalu panggil di init

       List<Dataku> listData = [];
   
       getListData() {
           listMap.forEach((element) {
           listData.add(Dataku.fromJson(element));
           });
       }
   
       @override
       void initState() {
           getListData();
           super.initState();
       }
   

3. 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"))
           ],
           ),
       );
       }
   

4. Buat function untuk mengubah status isLoad menjadi berubah ubah.

       loadHero(Dataku dataku) {
           setState(() {
           dataku.isLoad = !(dataku.isLoad ?? false);
           });
       }
   

5. Panggil widget namaHero di dalam ListView.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.

{{< youtube id="7dFxL6wjMJc" autoplay="true" color="white" yt_start="12" yt_end="24">}}

✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i

Video