Media Pengembangan Web & App | by APPKEY

Pembuatan AplikasiMobile ProgrammingCara Mengimplementasikan efek Shimmer Flutter dengan Mudah

Cara Mengimplementasikan efek Shimmer Flutter dengan Mudah

-

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

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.

Artikel Terkait  Belajar Ngoding: Rangkuman Lengkap Tipe Data Python

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.

Artikel Terkait  Java vs Python: Pilihan Terbaik Untuk Membangun Aplikasi Web Dinamis?

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.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya