Tutorial Flutter Cara Menggunakan Cached Network Image

Tutorial flutter cached network image
Tutorial flutter cached network image
Codingtive.com - Cached network image merupakan library yang digunakan untuk menampilkan gambar,  dan menyimpan gambar yang sudah diload kedalam cache. Kelebihannya yaitu ketika membuka aplikasi dan load gambar dari internet, kita tidak perlu selalu melakukan load ulang karena library ini dapat menyimpan gambar yang sudah diload kedalam cache.

Ada berbagai fitur yang dapat kita gunakan dengan mudah menggunakan library cached network image seperti penggunaan placeholder, error untuk handling image ketika load, dan animation. 

Pada tutorial ini akan kita bahas bagaimana cara penggunaannya, pastikan kamu mengikutinya sampai selesai.

 1. Buat project flutter

Pertama buat project baru atau kamu dapat menggunakan project sebelumnya yang sudah ada, untuk edittor kamu dapat menggunakan Android Studio atau Visual Studio Code.

2. Menambahkan dependencies 

Buka file pubspec.yaml pada root project, lalu tambahkan dependencies untuk library cached network image. Sehingga kodenya menjadi seperti 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 belajar bagaimana cara menggunakannya. Buka file main.dart pada folder lib, kemudian hapus semua kodenya dan ubah menjadi seperti 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 dapat menggunakan library cached network image, kita harus import packagenya yaitu :
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 digunakan :

- 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 ketika belum selesai diload.
- errorWidget : untuk menampilkan gambar pengganti ketika 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 contoh kodenya :

Menggunakan placeholder
Menampilkan circular progress sebagai placeholder ketika load gambar. Kamu dapat menggantinya dengan widget lain, contohnya seperti 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
Flutter placeholder image
Menggunakan error widget
Contohnya ketika url gambar salah dan tidak dapat load gambar, menampilkan widget Text, kamu juga dapat 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
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
Flutter image cache library
Demikian tutorial cara menggunakan cached network image menggunakan Flutter, jika kamu ada pertanyan atau kendala dapat berdiskusi lewat kolom komentar.

Kesimpulan

Cached network image library sangat cocok kamu gunakan ketika kamu ingin menampilkan gambar dan menyimpannya pada cache. Selanjutnya kamu dapat belajar lebih banyak lagi pada dokumentasi cached network image library.

Kamu juga dapat belajar menampilkan gambar pada Flutter dengan penjelasan yang lengkap pada artikel tutorial flutter belajar image widget.

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Flutter Cara Menggunakan Cached Network Image"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel