Tutorial Flutter Cara Memakai Cached Network Image

Tutorial flutter cached network image

- Cached network image merupakan library yang dipakai untuk menampilkan gambar,  dan menyimpan gambar yang sudah diload kedalam cache. Kelebihannya yakni saat membuka aplikasi dan load gambar dari internet, kita tidak perlu selalu melaksanakan load ulang sebab library ini sanggup menyimpan gambar yang sudah diload kedalam cache.

Ada banyak sekali fitur yang sanggup kita gunakan dengan gampang memakai library cached network image ibarat penggunaan placeholder, error untuk handling image saat load, dan animation. 

Pada tutorial ini akan kita bahas bagaimana cara penggunaannya, pastikan kau mengikutinya hingga selesai.

 1. Buat project flutter

Pertama buat project gres atau kau sanggup memakai project sebelumnya yang sudah ada, untuk edittor kau sanggup memakai Android Studio atau Visual Studio Code.

2. Menambahkan dependencies 

Buka file pubspec.yaml pada root project, kemudian tambahkan dependencies untuk library cached network image. Sehingga kodenya menjadi ibarat berikut :

dependencies:   flutter:     sdk: flutter   cached_network_image: ^1.0.0 

Kemudian ketik perintah flutter pub get pada terminal atau save file pubspec.yaml  untuk update dependencies yang kita tambahkan, pastikan terkoneksi dengan internet.

3. Menggunakan cached network image

Selanjutnya, kita akan mencar ilmu bagaimana cara menggunakannya. Buka file main.dart pada folder lib, kemudian hapus semua kodenya dan ubah menjadi ibarat berikut :

import 'package:flutter/material.dart'; import 'package:cached_network_image/cached_network_image.dart';  void main() {   runApp(MaterialApp(     title: "Flutter Image Cached",     debugShowCheckedModeBanner: false,     home: MyApp(),   )); }  class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text("Cached Network Image"),       ),       body: Center(         child: CachedNetworkImage(           imageUrl: "https://miro.medium.com/max/4000/1*xC_TLYcq5MO4VGAPgPDqHg.png",           width: 250,           height: 150,           fit: BoxFit.cover,         ),       ),     );   } } 

Untuk sanggup memakai library cached network image, kita harus import packagenya yakni :

import 'package:cached_network_image/cached_network_image.dart'; 

Widget CachedNetworkImage membutuhkan parameter berupa imageUrl yaitu lokasi gambar yang akan ditampilkan. Berikut beberapa properties pada widget CachedNetworkImage yang sering dipakai :

- imageUrl : url / lokasi gambar yang akan ditampilkan.
- width : mengatur ukuran lebar.
- height : mengatur ukuran tinggi.
- fit : mengatur gambar dengan ruang atau box yang tersedia.
- placeholder : untuk menggantikan gambar saat belum selesai diload.
- errorWidget : untuk menampilkan gambar pengganti saat gagal load gambar.
- alignment : untuk mengatur posisi gambar
- fadeInDuration : mengatur durasi untuk animasi fade in.
- fadeOutDuration : mengatur durasi untuk animasi fade out.
- fadeInCurve : mengatur animasi untuk fade in.
- fadeOutCurve : mengatur animasi untuk fade out.
- cacheManager : untuk management cache dan pengaturan lainnya.

Berikut beberapa pola kodenya :

Menggunakan placeholder

Menampilkan circular progress sebagai placeholder saat load gambar. Kamu sanggup menggantinya dengan widget lain, misalnya ibarat Image.

child: CachedNetworkImage(   imageUrl: "https://miro.medium.com/max/4000/1*xC_TLYcq5MO4VGAPgPDqHg.png",   width: 250,   height: 150,   placeholder: (context, url) => CircularProgressIndicator(),   fit: BoxFit.cover, ), 

Flutter placeholder image

Menggunakan error widget
Contohnya saat url gambar salah dan tidak sanggup load gambar, menampilkan widget Text, kau juga sanggup menggantinya dengan widget lain.

child: CachedNetworkImage(   imageUrl: "https://miro.medium.com/max/4000/1*xC_TLYcq5MO4VGAPgPDqHg.p",   width: 250,   height: 150,   errorWidget: (context, url, error) => Text("Failed load image"),   fit: BoxFit.cover, ), 

Flutter image error widget

Menggunakan fadeIn dan fadeOut 

child: CachedNetworkImage(   imageUrl: "https://miro.medium.com/max/4000/1*xC_TLYcq5MO4VGAPgPDqHg.png",   width: 250,   height: 150,   fadeInCurve: Curves.bounceIn,   fadeOutCurve: Curves.fastOutSlowIn,   fadeInDuration: const Duration(milliseconds: 3000),   fadeOutDuration: const Duration(milliseconds: 3000),   fit: BoxFit.cover, ),

Flutter image cache library

Demikian tutorial cara memakai cached network image memakai Flutter, bila kau ada pertanyan atau hambatan sanggup berdiskusi lewat kolom komentar.

Kesimpulan

Cached network image library sangat cocok kau gunakan saat kau ingin menampilkan gambar dan menyimpannya pada cache. Selanjutnya kau sanggup mencar ilmu lebih banyak lagi pada dokumentasi cached network image library.

Kamu juga sanggup mencar ilmu menampilkan gambar pada Flutter dengan klarifikasi yang lengkap pada artikel tutorial flutter mencar ilmu image widget.

Share this post