Cara Mengimplementasikan efek Shimmer Flutter dengan Mudah

Last Updated on January 11, 2022 by

Pada setiap aplikasi maupun website pasti memiliki waktu pemuatan (loading time). Oleh karena itu, sangat penting untuk memberitahukan kepada pengguna atau visitor bahwa halaman atau aplikasi yang mereka gunakan masih dalam proses pemuatan. Salah satu cara terpopuler untuk menampilkan waktu pemuatan adalah dengan menampilkan warna krom yang berisi animasi berkilau (shimmer) di atas bentuk yang mendekati konten yang sedang di muat.

Pada artikel ini, kami akan memberikan flutter tutorial tentang penerapan shimmer dalam Bahasa pemrograman Flutter. Cara membuatnya pun cukup mudah, terlebih untuk Anda yang sudah   mengerti Bahasa pemrograman Dart. Ini di acara membuat shimmer Flutter dengan mudah.

Shimmer Flutter

Saat memulai aplikasi, kita biasanya melihat tampilan pemuatan saat aplikasi mengambil data dari database lokal atau server. Cukup mudah untuk menerapkan indikator pemuatan dengan Flutter, cukup gunakan ProgressIndicator.

Shimmer sedikit lebih sulit untuk dicapai daripada pendekatan lain karena memerlukan semua widget untuk menganimasikan secara bersamaan dan juga menjaga bentuknya agar pengguna tahu seperti apa tampilan akhir. Shimmer Flutter jauh berbeda dari widget pemuatan tunggal.

Tapi ini pasti layak dilakukan karena memungkinkan pengguna lebih mudah memahami apa yang akan terjadi setelah memuat animasi dengan menyimpan semua widget di posisi yang sama dengan ukuran dan bentuk yang sama, yang meningkatkan pengalaman pengguna. Selanjutnya adalah penjelasan tentang Shimmer Flutter Tutorial.

Flutter Tutorial : Membuat Shimmer Flutter

Tutorial Flutter berikut ini menjelaskan tentang cara membuat Shimmer Flutter dengan mudah. Simak terus jika Anda ingin tahu.

1. Menggambar Shimmer Flutter

Bentuk shimmer dalam efek ini tidak tergantung pada konten sebenarnya yang akhirnya dimuat. Oleh karena itu, tujuannya adalah untuk menampilkan bentuk yang mewakili konten akhirnya seakurat mungkin.

Menampilkan bentuk yang akurat mudah dilakukan dalam situasi di mana konten memiliki batas yang jelas. Misalnya, dalam resep ini ada beberapa gambar melingkar dan beberapa gambar persegi panjang membulat. Anda dapat menggambar bentuk yang persis sama dengan garis luar gambar tersebut.

Di sisi lain, pertimbangkan teks yang muncul di bawah gambar persegi panjang yang dibulatkan. Anda tidak akan tahu berapa banyak baris teks yang ada sampai teks dimuat. Oleh karena itu, tidak ada gunanya mencoba menggambar persegi panjang untuk setiap baris teks.

Sebagai gantinya, saat data sedang dimuat, Anda menggambar beberapa persegi panjang bulat yang sangat tipis yang mewakili teks yang akan muncul. Bentuk dan ukurannya tidak cukup cocok, tapi tidak apa-apa.

Mulailah dengan daftar item melingkar di bagian atas layar. Pastikan setiap widget CircleListItem menampilkan lingkaran dengan warna saat gambar dimuat.

class CircleListItem extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Padding(
     padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
     child: Container(
       width: 60,
       height: 60,
       decoration: const BoxDecoration(
         color: Colors.yellow,
         shape: BoxShape.circle,
       ),
       child: ClipOval(
         child: Image.network(
           'https://flutter'
           '.dev/docs/cookbook/img-files/effects/split-check/Gambar1.jpg',
           fit: BoxFit.cover,
         ),
       ),
     ),
   );
 }
}

Selama widget Anda menampilkan semacam bentuk, Anda dapat menerapkan efek shimmer dalam tips ini. Mirip dengan widget CircleListItem, pastikan widget CardListItem menampilkan warna tempat gambar akan muncul. Juga, di widget CardListItem, beralih antara tampilan teks dan persegi panjang berdasarkan status pemuatan saat ini.

class CardListItem extends StatelessWidget {
 const CardListItem({
   Key? key,
   required this.isLoading,
 }) : super(key: key);

 final bool isLoading;

 @override
 Widget build(BuildContext context) {
   return Padding(
     padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 24),
     child: Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         _buildImage(),
         const SizedBox(height: 24),
         _buildText(),
       ],
     ),
   );
 }

 Widget _buildImage() {
   return AspectRatio(
     aspectRatio: 2 / 3,
     child: Container(
       width: double.infinity,
       decoration: BoxDecoration(
         color: Colors.yellow,
         borderRadius: BorderRadius.circular(24),
       ),
       child: ClipRRect(
         borderRadius: BorderRadius.circular(24),
         child: Image.network(
           'https://flutter'
           '.dev/docs/cookbook/img-files/effects/split-check/Gambar2.jpg',
           fit: BoxFit.cover,
         ),
       ),
     ),
   );
 }

 Widget _buildText() {
   if (isLoading) {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Container(
           width: double.infinity,
           height: 28,
           decoration: BoxDecoration(
             color: Colors.yellow,
             borderRadius: BorderRadius.circular(24),
           ),
         ),
         const SizedBox(height: 24),
         Container(
           width: 600,
           height: 60,
           decoration: BoxDecoration(
             color: Colors.yellow,
             borderRadius: BorderRadius.circular(24),
           ),
         ),
       ],
     );
   } else {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 9.0),
       child: Text(
         'Artikel ini berasal dari situs Web App, lho!’
         'Kunjungi Web App di https://appkey.id/.',
       ),
     );
   }
 }
}

Melukis Shimmer Gradient

Anda dapat menambah gradient pada efek shimmer Anda dengan menggunakan widget bernama ShaderMask. Widget ShaderMask, seperti namanya, menerapkan shader ke anaknya, tetapi hanya di area di mana anak sudah melukis sesuatu. Misalnya, Anda akan menerapkan shader hanya ke bentuk hitam yang Anda konfigurasikan sebelumnya.

Tentukan gradien linier berwarna krom yang diterapkan pada bentuk shimmer.

const _shimmerGradient = LinearGradient(
 colors: [
   Color(0xEEE9E9),
   Color(0xCDC9C9),
   Color(0x8B8989),
 ],
 stops: [
   0.2,
   0.3,
   0.4,
 ],
 begin: Alignment(1.0, 0.2),
 end: Alignment(2.0, 0.4),
 tileMode: TileMode.clamp,
);

Tentukan widget stateful baru bernama ShimmerLoading yang membungkus widget anak tertentu dengan ShaderMask. Konfigurasikan widget ShaderMask untuk menerapkan gradien shimmer sebagai shader dengan blendMode dari srcATop. Mode campuran srcATop menggantikan warna apa pun yang dilukis widget anak Anda dengan warna shader.

class ShimmerLoading extends StatefulWidget {
 const ShimmerLoading({
   Key? key,
   required this.isLoading,
   required this.child,
 }) : super(key: key);

 final bool isLoading;
 final Widget child;

 @override
 _ShimmerLoadingState createState() => _ShimmerLoadingState();
}

class _ShimmerLoadingState extends State<ShimmerLoading> {
 @override
 Widget build(BuildContext context) {
   if (!widget.isLoading) {
     return widget.child;
   }

   return ShaderMask(
     blendMode: BlendMode.srcATop,
     shaderCallback: (bounds) {
       return _shimmerGradient.createShader(bounds);
     },
     child: widget.child,
   );
 }
}

Bungkus widget CircleListItem Anda dengan widget ShimmerLoading.

Widget _buildTopRowItem() {
 return ShimmerLoading(
   isLoading: _isLoading,
   child: CircleListItem(),
 );
}

Bungkus widget CardListItem Anda dengan widget ShimmerLoading.

Widget _buildTopRowItem() {
 return ShimmerLoading(
   isLoading: _isLoading,
   child: CircleListItem(),
 );
}

Saat bentuk Anda dimuat, mereka sekarang menampilkan gradien shimmer yang dikembalikan dari shaderCallback.

Widget _buildListItem() {
 return ShimmerLoading(
   isLoading: _isLoading,
   child: CardListItem(
     isLoading: _isLoading,
   ),
 );
}

Ini adalah langkah besar ke arah yang benar, tetapi ada masalah dengan tampilan gradien ini. Setiap widget CircleListItem dan setiap widget CardListItem menampilkan versi baru dari gradien.

Membuat Animasi Shimmer Flutter

Gradien shimmer perlu bergerak untuk memberikan tampilan kilau berkilauan. LinearGradient memiliki properti yang disebut transformasi yang dapat digunakan untuk mengubah tampilan gradien, misalnya, untuk memindahkannya secara horizontal. Properti transform menerima instance GradientTransform.

Tentukan kelas yang disebut _SlidingGradientTransform yang mengimplementasikan GradientTransform untuk mencapai tampilan geser horizontal.

class _SlidingGradientTransform extends GradientTransform {
 const _SlidingGradientTransform({
   required this.slidePercent,
 });

 final double slidePercent;

 @override
 Matrix4? transform(Rect bounds, {TextDirection? textDirection}) {
   return Matrix4.translationValues(bounds.width * slidePercent, 0.0, 0.0);
 }
}

Persentase slide gradien berubah dari waktu ke waktu untuk menciptakan tampilan gerakan. Untuk mengubah persentase, konfigurasikan AnimationController di kelas ShimmerState.

class ShimmerState extends State<Shimmer> with SingleTickerProviderStateMixin {
 late AnimationController _shimmerController;

 @override
 void initState() {
   super.initState();

   _shimmerController = AnimationController.unbounded(vsync: this)
     ..repeat(min: 0.5, max: 2.0, period: const Duration(milliseconds: 1500));
 }

 @override
 void dispose() {
   _shimmerController.dispose();
   super.dispose();
 }
}

Aplikasikan _SlidingGradientTransform ke gradien dengan menggunakan nilai _shimmerController sebagai slidePercent.

LinearGradient get gradient => LinearGradient(
  colors: widget.linearGradient.colors,
  stops: widget.linearGradient.stops,
  begin: widget.linearGradient.begin,
  end: widget.linearGradient.end,
  transform: _SlidingGradientTransform(slidePercent: 
    _shimmerController.value),
);

Gradien sekarang bernyawa, tetapi widget ShimmerLoading individual Anda tidak mengecat ulang dirinya sendiri saat gradien berubah. Karena itu, sepertinya tidak ada yang terjadi. Paparkan _shimmerController dari ShimmerState sebagai Listenable.

Listenable get shimmerChanges => _shimmerController;

Di ShimmerLoading, dengarkan perubahan pada properti shimmerChanges leluhur ShimmerState, dan warnai ulang gradien shimmer.

class _ShimmerLoadingState extends State<ShimmerLoading> {
 Listenable? _shimmerChanges;

 @override
 void didChangeDependencies() {
   super.didChangeDependencies();
   if (_shimmerChanges != null) {
     _shimmerChanges!.removeListener(_onShimmerChange);
   }
   _shimmerChanges = Shimmer.of(context)?.shimmerChanges;
   if (_shimmerChanges != null) {
     _shimmerChanges!.addListener(_onShimmerChange);
   }
 }

 @override
 void dispose() {
   _shimmerChanges?.removeListener(_onShimmerChange);
   super.dispose();
 }

 void _onShimmerChange() {
   if (widget.isLoading) {
     setState(() {
       // update the shimmer painting.
     });
   }
 }

Itulah penjelasan tentang cara membuat shimmer Flutter dengan mudah. Jika Anda ingin mendapatkan lebih banyak informasi seputar Flutter Tutorial, jangan lupa kunjungi Web App di http://appkey.id/ atau download aplikasinya di Google Play Store agar Anda tidak ketinggalan informasi terbaru.