Day18-สร้าง ListView จากไฟล์ json

4 min readJan 18, 2021

สอนตัวเองเขียน app ด้วย Flutter ใน25วัน (Flutter Self-Learning Challenge in 25 Days)

วันนี้จะเป็นการทำ ListView App ที่เรียกข้อมูลจากตัวไฟล์ json ซึ่งเราสามารถเรียกได้จากไฟล์ json ที่อยู่บนเว็บ และจากไฟล์ json ที่ทำการดาวโหลดลงมาในเครื่องของเรา โดยในวันนี้จะทำการเรียกจากไฟล์ json ที่ดาวโหลดลงมาเก็บไว้

ไฟล์ json มีลักษณะเหมือนกับ text file เราสามารถพิมพ์ข้อมูลได้จาก text editor ทั่วไป แต่ถ้าข้อมูลมีจำนวนมาก การใช้ web service ที่ช่วยสร้างไฟล์ข้อมูล json ให้เราน่าจะสะดวกกว่า โดยเราจะเข้าไปยังเว็บไซด์ที่ให้บริการในการสร้างข้อมูลไฟล์ json จาก https://www.mockaroo.com/

ให้เราเข้าไปเพิ่มในส่วนของ field และ type ดังภาพ

จากนั้นลองกด Preview เราจะได้ข้อมูลจำนวน 1,000 เรคคอร์ด

จากนั้นให้เราเลือก format เป็นjson แล้วทำการดาวโหลดลงมาเก็บไว้ในโฟล์เดอร์ assets/ ที่เราต้องสร้างไว้ที่ root ของโปรเจคนี้ และทำการแก้ไขไฟล์ pubspec.ymal เพิ่ม assets/ชื่อไฟล์.json ลงในส่วน assets:

ในไฟล์ main.dart เราจะทำการสร้างโปรแกรม main() => runApp(MyApp()); เพื่อเริ่มต้นและทำการ import Package ต่างๆตามภาพ

โดย MyApp() จะเป็น stateless widget class ที่ return ตัว MaterialApp และมีการกำหนด theme: Property ให้ใช้ ThemeData widget ที่มีค่า primarySwatch: Property สำหรับกำหนดค่าสีของตัว Interface ของ App ซึ่งเราจะต้องประกาศค่าตัวแปร Color ที่ชื่อ themeColor และตั้งค่าสีไว้ ใน home: Property จะทำการเรียกไปยัง MyHomePage() ซึ่งเป็น stateful widget class ที่จะสร้างขึ้นในลำดับต่อไป

ให้เราทำการสร้าง class ที่ชื่อ User ขึ้นมาเพื่อเก็บค่าตัวแปรของข้อมูลที่เราจะเอามาจากไฟล์ json และทำการสร้าง Constructor ดังรูป

สร้าง stateful widget class ชื่อ MyHomePage โดยในส่วน state class จะเรียกใช้ Future widget สร้าง _getUsers method สำหรับโหลดข้อมูลจากไฟล์ json เก็บไว้ในตัวแปรที่ชื่อ users แล้วทำการ return ค่า users

ใน build method ของ state class จะreturn ตัว Scaffold widget ที่มีappBar property และ body: Property และใน body: นี้จะเรียก FutureBuilder widget ซึ่งใช้ _getUsers method ตอนที่เราใช้ Future widget ในตอนแรก และ return ตัว ListView ซึ่งใน itemBuilder: Property จะเรียกใช้ BuildContext widget ที่ return ค่า ListTitle ที่ประกอบด้วยตัวรูปจาก CircleAvatar widget ตัวชื่อจาก Text widget และตัวอีเมลจาก Text widget ในส่วน onTap: Property เมื่อผู้ใช้ทำการเลือก ก็จะเรียก Navigator.push ไปยังหน้า DetailPage() ที่อยู่ในไฟล์ detailpage.dart

ให้เราสร้างไฟล์ detailpage.dart และทำการ import Package ตัว material.dart และ main.dart แล้วสร้างstateless widget class ชื่อ DetailPage

ทำการประกาศตัวแปรชื่อ user และ Constructor

จากนั้นในส่วน build method จะ returnค่าเป็น Scaffold widget ที่มี appBar Property และ body: Property ซึ่งในส่วน body: จะเป็นการแสดงข้อมูลใน Card widget โดยจะมีการจัดลำดับของตัวรูปภาพ จาก CircleAvatar widget และ Text widget ร่วมกับการเว้นระยะด้วย SizedBox widget ดังภาพ