Shimmer Effect Di Flutter

Shimmer effect adalah teknik yang populer dalam pengembangan aplikasi mobile untuk memberikan kesan animasi dan ketertarikan visual saat data dimuat. Dalam artikel ini, kita akan menjelaskan Shimmer effect dan memberikan penjelasan tentang kode yang telah disediakan untuk mengimplementasikannya dalam aplikasi Flutter.

Apa Itu Shimmer Effect?

Shimmer effect adalah efek kilauan atau kedipan yang digunakan untuk menunjukkan bahwa data sedang dimuat atau bahwa elemen tampilan sedang aktif. Ini membuat pengguna merasa bahwa sesuatu sedang terjadi di belakang layar dan memberikan umpan balik visual yang menarik.

Shimmer effect biasanya digunakan pada elemen tampilan seperti daftar atau kotak teks untuk menunjukkan bahwa data sedang dimuat. Ini terlihat seperti garis-garis yang berkilauan yang mengalir melintasi elemen tampilan, memberikan kesan bahwa data sedang tiba.

Contoh Output Implementasi Shimmer Effect pada aplikasi kontak sederhana :

Berikut Contoh Codenya :

main.dart

import 'package:artikel/shimmer.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home:  ShimmerTesting(),
    );
  }
}

shimmer.dart

import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

class Contact {
  final String name;
  final String phone;

  Contact(this.name, this.phone);
}

class ShimmerTesting extends StatefulWidget {
  @override
  _ShimmerTestingState createState() => _ShimmerTestingState();
}

class _ShimmerTestingState extends State<ShimmerTesting> {
  final List<Contact> contacts = [
    Contact('John Doe', '123-456-7890'),
    Contact('Jane Smith', '987-654-3210'),
    Contact('Alice Johnson', '555-123-4567'),
  ];

  bool isDataLoaded = false;

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 5), () {
      setState(() {
        isDataLoaded = true;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Daftar Kontak dengan Shimmer'),
        ),
        body: ListView.builder(
          itemCount: contacts.length,
          itemBuilder: (context, index) {
            return isDataLoaded
                ? ListTile(
                    leading: CircleAvatar(
                      backgroundColor: Colors.grey.shade200,
                      radius: 25.0,
                      child: Icon(Icons.person),
                    ),
                    title: Text(contacts[index].name),
                    subtitle: Text(contacts[index].phone),
                  )
                : Shimmer.fromColors(
                    baseColor: Colors.grey.shade300,
                    highlightColor: Colors.grey.shade100,
                    child: const ListTile(
                      leading: CircleAvatar(
                        backgroundColor: Colors.white,
                        radius: 25.0,
                      ),
                      title: Text('Loading...'),
                      subtitle: Text('Loading...'),
                    ),
                  );
          },
        ),
      ),
    );
  }
}

Implementasi Shimmer Effect dalam Flutter

Kode yang telah diberikan adalah contoh penggunaan Shimmer effect dalam aplikasi Flutter. Mari kita tinjau bagian penting dari kode ini:

1. Shimmer.fromColors: Ini adalah widget yang digunakan untuk mengimplementasikan efek Shimmer. Dalam kode, kita mengatur baseColor dan highlightColor yang digunakan untuk mengontrol warna dasar dan warna kilauan Shimmer.
2. ListView.builder: Ini adalah widget yang digunakan untuk menampilkan daftar kontak. Setiap item dalam daftar kontak dapat memiliki dua bentuk: mode “Loading…” atau data asli. Ini diatur dengan variabel isDataLoaded.
3. Future.delayed: Dalam initState, kita menambahkan penundaan selama 5 detik sebelum beralih ke mode “Data asli”. Setelah 5 detik, kita mengatur isDataLoaded menjadi true dengan memanggil setState, yang memicu perubahan tampilan dari Shimmer effect ke data asli.
4. Selama mode “Loading…”, Shimmer effect ditampilkan di setiap item dalam daftar kontak. Garis-garis Shimmer akan berkilauan dengan warna yang telah ditentukan dalam baseColor dan highlightColor.
5. Selama mode “Data asli”, daftar kontak akan menampilkan data kontak yang sebenarnya, termasuk nama dan nomor telepon.
6. Class Contact berfungsi untuk menyimpan data contact karena pada kasus ini merupakan contoh implementasi sederhana shimmer effect pada aplikasi kontak

Shimmer effect adalah cara yang bagus untuk memberikan umpan balik visual kepada pengguna saat data dimuat atau proses yang memerlukan waktu sedang berlangsung. Ini memberikan tampilan yang lebih menarik dan dinamis pada aplikasi Anda.