Copyright 2024 - Custom text here

และแล้วก็มาถึงตอนสุดท้าย ของ มหกรรม เขียนแอพแอนดรอยด์ บน Flutter ที่เกี่ยวข้องกับ ListView สำหรับใครไม่ทั้นไปโหลด Source Code ที่ GitHub ของมาสเตอร์ ได้เลยครับ https://github.com/masterUNG/listview_flutter

จากตอนที่แล้ว เราสามารถสร้างให้ Icon ที่ appBar สามารถ คลิกและ Printe ข้อความบน Console ได้ http://androidthai.in.th/android-flutter/116-android-flutter-click-icon-on-appbar ต่อไปเราตัองการให้คลิกแล้ว สร้าง Scaffold ใหม่ มีการแสดง ค่าที่เลือก ไปที่ Scaffold ใหม่ด้วย แบบนี่

 

เราเลือก สาม หัวข้อแรก

สามหัวข้อที่เลือกจะถูกส่งมาที่ Scaffold ใหม่ด้วย เรามาเริ่มต้นกันครับ

 มาสเตอร์ มาที่ เมธอด clickOnIcon() ที่เราหนดให้เมื่อคลิกที่ Icon บน appBar และ มาทำงานที่นี่ โดยการ Print You Click Icon บน Console

 ประกาศตัวแปร pageRoute ที่ มีค่าเท่ากับ Object MaterislPageRoute

ได้มาละ สังเกตุ null นะ

ใส่ context 

 

 

 พิมพ์ ปีกกาเข้าไปและจัดรูปครับ

 

ในปีกกา ประกาศตัวแปร listTiles

 

 ใสแทน f

ในวงเล็บ แคช wordPair เข้าไปครับ

จัดรูปให้ดูง่าย

เราจะสร้าง ListView โดยเริ่มจากการสร้าง ListTile ก่อนครับ

โดย ListTile จะส่งค่าที่ได้จากการเลือกออกไป เราจะกำหนด Title ของหน้าใหม่ก่อน

 กำหนด fontSize และ fontWeight

จัดรูปให้ดูดี

 เว้นที่ว่าง (แต่ยังอยู่ใน MaterPageRoute นะ)

 return ค่าของ Object Scaffold

โดย Scaffold จะต้องประกอบไปด้วย appBar และ body

ส่วนของ appBar เราจะแสดงตัวอักษร Checked Word

ส่วนของ body จะแสดงค่าของ Object ListView

สร้าง children 

 

ลบ Widget ออก แทนที่ด้วย listTiles.toList()

กำหนดให้ ถ้าคลิกที่ Icon ให้เปลี่ยน Scaffold ไป pageRoute ลองทดสอบครับ

  

คลิก ที่ Icon จะ ไปมา ระหว่าง Scaffold ได้ครับ

 

   

ลองคลิก เลือก AIRGAS และที่ Icon ที่ appBar จะเห็นสิ่งที่เลือกไปที่ Scaffold ใหม่ ครับ

 

   

เลือก มากๆ ก็ได้

 

   

หรือ เลือกออกก็ได้ น่าจะได้ แต่ถ้าไม่ได้อย่างไร  ? ลองดูที่ Source Code นี่นะครับ https://github.com/masterUNG/listview_flutter โปรเจ็ค Flutter ListView เอาแค่นี่ก่อน ครั้งหน้าเรามาเริ่มเรืียนรู้เรื่องอื่นบ้าง ขอบคุณครับ ที่ติดตามมาสเตอร์ ตลอดครับ

 

 

 

คอร์ส สอนโปรเจ็คแอนดรอยด์ ตัวต่อตัว

privateProject2019v1

คอร์ส เบสิกแอนดรอยด์ สอน ตัวต่อตัว

privateAndroid2019v1

คอร์ส iOS สอน ตัวต่อตัว

privateIos2019V1

คอร์ส Flutter สอน ตัวต่อตัว

privateFlutter2019v1

f t g