Pada artikel kelanjutan series Flutter Bahasa Indonesia, Konsep Koding akan berbagi tutorial dan informasi mengenai bagaimana caranya membuat ListView menggunakan dan memuat datanya dari JSON file. 

Akan dijelaskan secara detail mengenai bagaimana caranya Membuat ListView makanan  atau menu restaurant dan menampilkannya dalam sebuah ListView di Flutter.

Tutorial Flutter Menampilkan Listview Dengan JSON data


Apa Itu Listview Flutter?

ListView adalah widget gulir yang paling umum digunakan. Ini menampilkan children satu demi satu dalam arah gulir. Pada sumbu silang, children diminta untuk mengisi ListView.


Membuat Project 

Pertama jika kamu belum memiliki project flutter maka buat dulu project baru Flutter dengan command di bawah ini di terminal/cmd mu :

flutter create restaurant

Menginstall Packages 

Tambahkan dan ubah kode di pubspec.yaml anda:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  build_runner: ^2.0.0 #concrete way of generating files using Dart code

dev_dependencies:
  json_model: ^1.0.0
  json_serializable: ^5.0.0
  flutter_test:
    sdk: flutter


Setting JSON pubspec

Tambahkan dan ubah kode di pubspec.yaml anda, kode di bawah berguna agar Flutter bisa mengakses file JSON yang dibuat.

  # To add assets to your application, add an assets section, like this:
  assets:
    - jsonfile/
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg


Membuat Folder dan File JSON


Buat folder jsonfile dan file restaurant.json seperti gambar di bawah ini :



Kemudian tambahkan kode JSON di restaurant.json seperti di bawah ini :



Membuat Model JSON Flutter


Buat file baru di folder lib dengan nama file foodModel.dart kemudian tambahkan kode di bawah ini:


Membuat UI  Flutter Dan Menampilkannya di Main App

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




Kemudian run project flutter mu dengan perintah :

flutter run

Maka hasilnya akan seperti gambar di bawah ini :



Apa Selanjutnya?

Di tutorial selanjutnya di PART II tutorial ini kita akan mecoba membuat detail screen untuk aplikasi Makanan Flutter yang kita buat.


Untuk source kode nya bisa di download disini pastikan untuk menjalankan flutter pub get

Sekian untuk tutorial Flutter membuat aplikasi menu makanan atau food app semoga artikel ini dapat bermanfaat dan membantu kamu.


Baca Tutorial Flutter Dart KonsepKoding Lainnya:
#28 Tutorial HTTP Request Flutter Get API
#29 Tutorial Membuat UI Login Animasi Keren Flutter