Dalam pengembangan aplikasi mobile, antarmuka pengguna (UI) yang menarik dan responsif adalah kunci untuk memberikan pengalaman yang menyenangkan kepada pengguna. Salah satu cara untuk meningkatkan kesan visual pada UI adalah dengan menggunakan efek shimmer, yang memberikan kesan animasi berkilau yang menarik pada elemen-elemen tampilan seolah-olah sedang mengalami pencerahan.
Flutter, kerangka kerja pengembangan aplikasi seluler yang kuat, menyediakan paket Flutter Shimmer yang memungkinkan pengembang dengan mudah mengimplementasikan efek shimmer pada aplikasi mereka. Dalam artikel ini, kita akan membahas tentang Flutter Shimmer, bagaimana menggunakannya, dan contoh penerapannya untuk menciptakan tampilan UI yang menarik dan interaktif.
Apa itu Flutter Shimmer?
Flutter Shimmer adalah paket Flutter yang memungkinkan pengembang untuk menambahkan efek kilau atau shimmer pada elemen-elemen tampilan dalam aplikasi. Efek ini biasanya digunakan saat aplikasi sedang memuat konten dari server atau dalam kondisi jaringan yang lambat. Flutter Shimmer memberikan umpan balik visual yang menarik untuk memberitahu pengguna bahwa konten sedang dimuat atau akan muncul segera.
Menggunakan Flutter Shimmer
Langkah pertama adalah menambahkan paket Flutter Shimmer ke file pubspec.yaml
Anda:
dependencies: flutter: sdk: flutter shimmer: ^3.0.0 |
Setelah itu, jalankan flutter pub get
untuk mengunduh dan memasang paket tersebut.
Contoh Penerapan Flutter Shimmer
Berikut adalah contoh sederhana tentang cara menggunakan Flutter Shimmer untuk memberikan efek kilau pada tampilan UI:
import ‘package:flutter/material.dart’; import ‘package:flutter/src/widgets/framework.dart’; import ‘package:flutter/src/widgets/placeholder.dart’; import ‘package:shimmer/shimmer.dart’; class ArtikelPage14 extends StatefulWidget { const ArtikelPage14({super.key}); @override State<ArtikelPage14> createState() => _ArtikelPage14State(); } class _ArtikelPage14State extends State<ArtikelPage14> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(‘Flutter Shimmer’), ), body: ListView.builder( itemCount: 5, itemBuilder: (context, index) { return Shimmer.fromColors( baseColor: Colors.grey[300]!, highlightColor: Colors.grey[100]!, child: ListTile( leading: CircleAvatar( backgroundColor: Colors.white, radius: 25, ), title: Container( height: 16, width: 100, color: Colors.white, ), subtitle: Container( height: 16, width: 150, color: Colors.white, ), ), ); }, ), ); } } |
Berikut adalah visualnya :

Pada contoh di atas, kita menggunakan ListView.builder
untuk menampilkan daftar elemen dengan efek shimmer. Elemen ListTile
pada ListView
dikelilingi oleh Shimmer.fromColors
yang memberikan efek shimmer dengan mengatur warna dasar dan warna sorotan. Efek shimmer akan berjalan pada elemen yang sedang dimuat, sehingga memberikan kesan menarik pada saat konten muncul.
Kesimpulan
Flutter Shimmer adalah paket Flutter yang hebat untuk meningkatkan tampilan UI aplikasi dengan efek kilau yang menarik dan interaktif. Dengan menggabungkan efek shimmer dalam situasi yang tepat, aplikasi Anda dapat memberikan pengalaman yang lebih baik kepada pengguna saat konten sedang dimuat. Cobalah mengimplementasikan Flutter Shimmer pada proyek Flutter Anda dan amati bagaimana efek kilau ini meningkatkan tampilan aplikasi secara keseluruhan.