Posts

Assalamu’alaikum Warahmatullahi Wabarakatuh.

Hai teman-teman, kali ini saya akan kasih sedikit ilmu buat teman-teman semua. Bagaimana cara menampilkan gambar yang ada di internet pada Flutter.

Constructor yang digunakan untuk menampilkan gambar yang ada di internet yaitu Image.network(), kemudian masukkan URL gambar yang kita ambil.

Yuk langsung aja kita lihat bagaimana source code juga penjelasannya.

• Membuat project baru. Disini saya menggunakan Visual Studio Code, bagi teman-teman yang menggunakan Android Studio membuat project flutter baru sama seperti membuat project android baru. Pada Tab View, pilih Command Palette atau shortcut CTRL+SHIFT+P.

• Setelah itu akan muncul kotak dialog seperti di bawah ini, karena saya sudah pernah membuat project baru di flutter maka akan muncul recently usednya, jika tidak ada ketikkan pada kolom search New Project Flutter, setelah itu enter. Beri nama project dan pilih lokasi penyimpanannya.

• Pada file main.dart kita bisa memasukkan code seperti di bawah ini :

• Disini saya menggunakan foto yang ada di website Udacoding,

• Pada project ini juga menampilkan animasi transisi dari halaman satu ke halaman lainnya, ketika gambar diklik akan ada animasi sederhana. Untuk menambahkan animasi kita menggunakan GestureDetector dan HeroAnimation. Dibawah ini source code yang digunakan, diletakkan pada file main.dart dan di kedua class MainScreen dan DetailScreen.

• Jika sudah selesai, kita bisa menjalankan project yang dibuat. Dibawah ini adalah tampilan sebelum kita mengklik gambar.

• Jika kita mengklik gambar yang ada, maka akan menampilkan animasi transisi seperti dibawah ini.

Sekian dari saya, semoga bermanfaat ilmunya yaa teman-teman.

Wassalamu’alaikum.