-Tutorial Menampilkan Gambar Pada Flutter. Ok Teman Koding, kali ini saya akan berbagi tutorial Flutter mengenai bagaimana cara menampilkan image/gambar pada Flutter. Gambar adalah salah satu Widget yang sangat berguna pada Flutter, dengan gambar kita dapat menyampaikan informasi kepada user lebih mudah dan simple.

Show Image Flutter
Show Image Flutter


Pada tutorial flutter series Bahasa Indonesia, kali ini akan dijelaskan bagaimana cara menampilkan gambar di local file dan menampilkan image/gambar dari internet atau dari network. Langsung saja silahkan ikuti tutorial flutter di bawah ini :

Menampilkan Gambar dari Local Pada Flutter

1. Pertama pastikan kamu telah membuat project flutter, jika belum silhakn ketikan perintah di bawah
 flutter create show_image

2. Kemudian buat sebuah folder baru di root project mu :

assets/images/

3. Setelah itu daftarkan folder yang telah kamu buat ke file pubspec.yaml , ubah kode punspec.yaml menjadi seperti di bawah ini :

# The following section is specific to Flutter.
# tambahkan asset kode ini
flutter:
  assets:
    - assets/images/

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

4. Setelah itu maskan gambar apa såja terserah ke folder assets/images

https://www.konsepkoding.com/2020/05/12-tutorial-menampilkan-gambar-flutter.html


5. Setelah bah kode lib/main.dart menjadi seperti kode di bawah ini


6. Terakhir jika sudah, silahkan run project flutter mu, jika berhasil maka gambar akan ditampilkan seperti di bawah ini :

https://www.konsepkoding.com/2020/05/12-tutorial-menampilkan-gambar-flutter.html



Penjelasan Kode

Untuk menampilkan gambar dari local folder kita menggunakan potongan kode di bawah ini :

  new Image(image: AssetImage("assets/images/aye_captain.jpg"))),
Dimana kita menunjuk ke URL path dari direktori gambar yang ada di project flutter kita beserta ekxtensi (jenis file) nya.

Menampilkan gambar Flutter dari Internet Atau Network Image


1. Silahkan ubah kode di file lib/main.dart menjadi seperti kode di bawah ini :

2. Jika sudah selesai menuliskan kode di atas silahkan run project mu,

flutter run

3. Jika kode yang kamu tulis benar, maka hasilnya akan seperti foto di bawah ini :

https://www.konsepkoding.com/2020/05/12-tutorial-menampilkan-gambar-flutter.html


Penjelasan Kode

Untuk menampilkan Image dari internet di Flutter kamu harus menggunakan potongan kode di bawah ini :

 //  Menampilkan Network Image Flutter
            child:
                new Image(image:  NetworkImage(
                "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw8lyvoQrLxEorxJw8Ru3KtofUTNPDHFGTmYZBOQWHYDD3E8Y6wryoxHFDkF969fvkQdjph2n9YCn1PJolrcZEWv6Uijjo8RcyzAsSxA_GTFPut1XtRl-rlc4GHbbpZ9E-ORBrvdv98QI/s640/React+Native1.jpg")))

Menggunakan widget  NetworkImage, di flutter.

Sekian semoga tutorial menampilkan gambar pada flutter dapat bermanfaat dan membantu kamu yang sedang mempelajari Flutter. Happy Coding and Keep Learning. Jika ada pertanyaan atau request tutorial silahkan tuliskan di kolom komentar.


#11 Tutorial Flutter Alert Dialog