Flutter adalah sebuah framework open-source untuk membangun aplikasi mobile yang dikembangkan oleh Google. Cached network image adalah sebuah widget yang tersedia di Flutter yang dapat digunakan untuk menampilkan gambar yang di-load dari internet, serta menyimpan salinan gambar tersebut di cache agar dapat digunakan kembali di masa yang akan datang.
Untuk menggunakan cached network image di Flutter, pertama-tama kamu perlu memasukkan dependensi cached_network_image ke dalam file pubspec.yaml di project Flutter kamu.
Kemudian, kamu dapat menambahkan widget CachedNetworkImage ke dalam aplikasi kamu dengan menyertakan URL gambar yang ingin kamu tampilkan sebagai parameter.
Kamu juga dapat menentukan placeholder yang akan ditampilkan sampai gambar sebenarnya selesai di-load, serta mengatur bagaimana aplikasi harus bersikap jika terjadi kesalahan saat mengunduh gambar.
Contoh sederhana penggunaan cached network image di Flutter adalah sebagai berikut:
CachedNetworkImage(
imageUrl: 'https://example.com/image.jpg',
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
)Di sini, kita menampilkan gambar yang di-load dari URL https://example.com/image.jpg menggunakan widget CachedNetworkImage, dan menampilkan CircularProgressIndicator sebagai placeholder sampai gambar sebenarnya selesai di-load. Jika terjadi kesalahan saat mengunduh gambar, widget Icon dengan ikon Icons.error akan ditampilkan.
Kamu juga dapat mengatur beberapa opsi lainnya saat menggunakan widget CachedNetworkImage di Flutter, seperti:
fit: Menentukan cara mengatur ukuran gambar yang di-load sesuai dengan widget yang menampilkan gambar tersebut.alignment: Menentukan posisi gambar yang di-load jika ukurannya tidak sama dengan widget yang menampilkan gambar tersebut.repeat: Menentukan apakah gambar harus diulang jika ukurannya lebih kecil dari widget yang menampilkan gambar tersebut.widthdanheight: Menentukan ukuran widget yang menampilkan gambar.colordancolorBlendMode: Menentukan warna yang dapat diaplikasikan ke gambar dan cara mengaplikasikannya.
Contoh penggunaan CachedNetworkImage dengan beberapa opsi tambahan adalah sebagai berikut:
CachedNetworkImage(
imageUrl: 'https://example.com/image.jpg',
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
fit: BoxFit.cover,
alignment: Alignment.center,
repeat: ImageRepeat.noRepeat,
width: 200,
height: 200,
color: Colors.red,
colorBlendMode: BlendMode.difference,
)Di sini, kita menampilkan gambar yang di-load dari URL https://example.com/image.jpg menggunakan widget CachedNetworkImage, dan menampilkan CircularProgressIndicator sebagai placeholder sampai gambar sebenarnya selesai di-load. Jika terjadi kesalahan saat mengunduh gambar, widget Icon dengan ikon Icons.error akan ditampilkan.
Selain itu, kita juga mengatur beberapa opsi lainnya seperti mengatur ukuran widget menjadi 200×200, menerapkan warna merah ke gambar, dan mengaplikasikan blend mode BlendMode.difference ke gambar.
