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.width
danheight
: Menentukan ukuran widget yang menampilkan gambar.color
dancolorBlendMode
: 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.