{"id":532,"date":"2022-07-02T10:24:02","date_gmt":"2022-07-02T03:24:02","guid":{"rendered":"https:\/\/dani.work\/blog\/?p=532"},"modified":"2022-08-16T13:38:50","modified_gmt":"2022-08-16T13:38:50","slug":"cara-membuat-shimmer-effect-di-flutter","status":"publish","type":"post","link":"https:\/\/insideofcode.com\/blog\/cara-membuat-shimmer-effect-di-flutter\/","title":{"rendered":"Cara Membuat Shimmer Effect di Flutter"},"content":{"rendered":"\n

Pengantar<\/h2>\n\n\n\n

Shimmer effect<\/em>, merupakan library <\/em> yang bisa digunakan untuk memberikan efek kilau pada tampilan atau tata letak (layout<\/em>) di aplikasi mobile maupun web. biasanya efek shimmer ini digunakan sebagai tampilan pada saat peroses menunggu konten di muat secara penuh, efek ini akan memberikan pengalaman tidak membosankan kepada user karena proses menunggu.<\/p>\n\n\n\n

Dan di flutter sendiri, sudah ada library<\/em> yang memudahkan kita untuk membuat shimmer<\/em><\/em> effect<\/em>. Library tersebut adalah shimmer<\/a>, sesuai dengan namanya library<\/em> nya ini sangat membantu kita untuk membuat efek tampilan mengkilau seperti yang biasa kita temukan di aplikasi-aplikasi besar seperti facebook, instagram, dll.<\/p>\n\n\n\n

Langusung aja kita bahas cara membuat Shimmer Effect di Flutter<\/strong><\/p>\n\n\n\n

Mebuat text shimmer<\/em><\/h2>\n\n\n\n
\"Contoh<\/figure>\n\n\n\n
SizedBox(\n  width: 200.0,\n  height: 100.0,\n  child: Shimmer.fromColors(\n    baseColor: Colors.red,\n    highlightColor: Colors.yellow,\n    child: Text(\n      'Shimmer',\n      textAlign: TextAlign.center,\n      style: TextStyle(\n        fontSize: 40.0,\n        fontWeight:\n        FontWeight.bold,\n      ),\n    ),\n  ),\n);\n<\/code><\/pre>\n\n\n\n
Membuat Shimmer<\/em> membentuk object<\/em><\/h2>\n\n\n\n
\"Shimmer<\/figure>\n\n\n\n
Kasus ini bisa di terapkan untuk menggambarkan item yang belum termuat sepenuhnya, avatar, text content, atau object <\/em>lainnya.<\/p>\n\n\n\n
Circle (lingkaran)<\/h3>\n\n\n\n
Object <\/em>bentuk lingkaran biasanya digunakan untuk menggambarkan avatar atau foto dari user, untuk membuat effect shimmer nya seperti berikut ini :<\/p>\n\n\n\n
Shimmer.fromColors(\n  baseColor: Colors.grey[300]!,\n  highlightColor: Colors.grey[100]!,\n  child: Container(\n    height: 80,\n    width: 80,\n    decoration: ShapeDecoration(\n      shape: const CircleBorder(),\n      color: const Color.fromARGB(255, 237, 237, 237),\n    ),\n  ),\n)<\/code><\/pre>\n\n\n\n
Rectangle (Persegi)<\/h3>\n\n\n\n
Efek shimmer persegi juga biasanya digunakan untuk konten berbentuk persegi seperti foto cover dari sebuah artikel, cara membuatnya sebagai berikut:<\/p>\n\n\n\n
Shimmer.fromColors(\n  baseColor: Colors.grey[300]!,\n  highlightColor: Colors.grey[100]!,\n  child: Container(\n    height: 80.0,\n    width: double.infinity, \/\/ lebar penuh atau bisa dengan angka double (ex: 120.0)\n  ),\n)<\/code><\/pre>\n\n\n\n
Kesimpulan<\/h2>\n\n\n\n
Efek Shimmer<\/em> sangat membatu memperhalus UX supaya pengguna tidak bosan saat menunggu atau loading data dari server, akan tetapi perlu diperhatikan juga jika setiap buka halaman selalu ada shimmer dan response time<\/em> nya juga sangat lama, itu juga bisa membuat user bosan, maka jika anda dihadapkan dengan kasus seperti itu, mungkin anda perlu mempertimbangkan implementasi caching<\/em> di spot-spot tertentu yang crucial<\/em>.<\/p>\n\n\n\n
Semoga bermanfaat, dan sekian.<\/p>\n\n\n\n
Refferensi<\/h2>\n\n\n\n