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
- 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.
Related
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 |
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 |
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.
0 Response to "Tutorial Flutter Cara Memakai Cached Network Image"
Post a Comment