บทความ Flutter

ตอนต่อจาก บทความตอนที่แล้ว Step 5 http://androidthai.in.th/android-flutter/109-app-android-on-flutter-assign-font-size-style-color มาครั้งนี่เราจะ ต่อยอดโดยการสร้าง ListView โดยเอา Random Words มาเป็น Content บน ListView ครับมาเตรียมโค้ดให้พร้อม ใครไม่ทั้นไปโหลด จาก GitHub ของมาสเตอร์ ที่ https://github.com/masterUNG/listview_flutter และ มาเริ่มกันครับ

ยังอยู่ในคลาสที่ สาม MyState ที่ทำหน้าที่ในการสร้าง Content มาสเตอร์ จะแยกการทำงานในการสร้าง Content ให้ ListView โดยการ สร้างเมธอด buildTitle ที่รับค่า เป็น WordPair แบบนี่ครับ

ในเมธอด buildListTitle จะ Return ค่ากลับไปเป็น Object ListTitle

เอาค่า wordPair ที่ได้จาก Argument มา ทำให้เป็นอักษรตัวใหญ่ทั้งหมด

กำหนด Style และ สี (จำได้ไหม ? http://androidthai.in.th/android-flutter/109-app-android-on-flutter-assign-font-size-style-color)

มาในส่วนของการประกาศตัวแปร 

มาสเตอร์ ประกาศตัวแปรเพิ่ม ที่ชื่อ myRandomWordArray ที่เป็น Array

และ กลับไปลบ ค่าของ body ที่อยู่ใน Object Scaffold

ไม่ขาดไม่เกินนะ

ที่นี่ มาสเตอร์ สร้าง Object ListView.builder

 ที่แดงๆ กด Tab

เส้นแดงตรงนี่ มาสเตอร์มีเทคนิก ให้ พิมพ์ {} ไปเลยครับ

จำไว้นะครับ มาสเตอร์เคย Error ตรงนี่มาก่อน ใส่ {} ไปเลย

จัดรูปให้ สวย

มาสเตอร์ If Statement เช็คค่าของ index ว่ามีขนาดมากกว่า หรือ ขนาด Array ของ myRandomWordArray ถ้าใช้ ให้เริ่ม Random ค่าทีละ 10 ค่า และ ลอง ทดสอบโค้ดครับ

ได้มาละ ListView โดยการใช้ Content จากการ Random Word เดี๋ยวครั้งหน้าเรามา Debug ดูค่า index กันครับ http://androidthai.in.th/android-flutter/111-android-flutter-run-debug