#12 Tutorial Menampilkan Gambar Pada Flutter

-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

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

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 :

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 :

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.

Baca Tutorial Flutter Dart KonsepKoding Lainnya:
#1 Pengenalan Bahasa Dart Dan Framework Flutter
#2 Tutorial Flutter: Install Dart Di Linux, Windows, Mac OS
#3 Tutorial Flutter: Dart Variable Dan Tipe Data
#4 Tutorial Flutter: Penulisan Function Dart
#5 Tutorial Flutter: Operator Dart
#6 Tutorial Flutter: Control Flow
#7 Tutorial Flutter: Dart Exceptions
#8 Tutorial Flutter: Dart Class
#9 Tutorial Flutter: Pointer Gesture

#10 Tutorial Flutter: Double Tap Gesture

#11 Tutorial Flutter Alert Dialog