UDACODING

Posts

CARA MENAMPILKAN GAMBAR DARI INTERNET PADA FLUTTER DENGAN VISUAL STUDIO CODE

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.
image-31 CARA MENAMPILKAN GAMBAR DARI INTERNET PADA FLUTTER DENGAN VISUAL STUDIO CODE
  • 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.
image-32 CARA MENAMPILKAN GAMBAR DARI INTERNET PADA FLUTTER DENGAN VISUAL STUDIO CODE
  • Pada file main.dart kita bisa memasukkan code seperti di bawah ini :
image-33 CARA MENAMPILKAN GAMBAR DARI INTERNET PADA FLUTTER DENGAN VISUAL STUDIO CODE
image-34-1024x466 CARA MENAMPILKAN GAMBAR DARI INTERNET PADA FLUTTER DENGAN VISUAL STUDIO CODE
  • Disini saya menggunakan foto yang ada di website Udacoding,
image-35-1024x56 CARA MENAMPILKAN GAMBAR DARI INTERNET PADA FLUTTER DENGAN VISUAL STUDIO CODE
  • 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.
image-36-1024x225 CARA MENAMPILKAN GAMBAR DARI INTERNET PADA FLUTTER DENGAN VISUAL STUDIO CODE
  • Jika sudah selesai, kita bisa menjalankan project yang dibuat. Dibawah ini adalah tampilan sebelum kita mengklik gambar.
image-37 CARA MENAMPILKAN GAMBAR DARI INTERNET PADA FLUTTER DENGAN VISUAL STUDIO CODE
  • Jika kita mengklik gambar yang ada, maka akan menampilkan animasi transisi seperti dibawah ini.
image-38 CARA MENAMPILKAN GAMBAR DARI INTERNET PADA FLUTTER DENGAN VISUAL STUDIO CODE

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

Wassalamu’alaikum.

1 Comment :

  1. Ndi February 5, 2020 at 3:06 am

    Chakkeeeep

    Reply

Leave a Reply :

* Your email address will not be published.