Day 04-สร้าง Interaction ให้กับไอคอนและเก็บค่าสถานะ

3 min readJan 4, 2021

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

วันที่4 ของการสอนตัวเองเขียนapp ด้วยFlutter ซึ่งเป็น codelab ที่ต่อจากเมื่อวาน ซึ่งจะเป็นการสร้างไอคอน Favorite รูปหัวใจ ต่อท้าย List ของคำที่สุ่มขึ้นมา เริ่มจากการสร้างตัวแปร _saved เพื่อเก็บค่าที่ผู้ใช้เลือก และตัวแปร alreadySaved เพื่อตรวจสอบว่าผู้ใช้เลือกแล้วหรือยัง

จากนั้นก็จะทำการเพิ่มไอคอนด้วย Property ที่ชื่อ trailing: ต่อท้ายจาก title: ใน ListTitle widget จากนั้นก็จะทำให้ไอคอนสามารถ Interact ได้เมื่อผู้ใช้เลือก โดยจะเพิ่ม Property ที่ชื่อ onTap: โดยจะทำการตรวจสอบ ด้วยคำสั่งsetState()จากค่าตัวแปร alreadySaved แล้วเก็บค่าในตัวแปร_saved ทีนี้ไอคอนรูปหัวใจก็จะสามารถกดเลือกหรือยกเลิกได้

จากนั้นจะเป็นการแสดง List ของคำที่ผู้ใช้เลือกในหน้าจอถัดไป ซึ่งจะต้องทำการเพิ่มไอคอนสำหรับแสดงหน้าจอถัดไปบน appBar และใช้ Property ที่ชื่อ action: เพื่อตรวจสอบสถานะการกด ด้วย Property ที่ชื่อ onPressed ซึ่งเมื่อผู้ใช้กดก็จะไปเรียก function ที่เขียนเพิ่มขึ้นมาชื่อ _pushSaved()

ใน pushSaved() จะเป็นการเรียก widget ที่ชื่อ Navigator และ MaterialPageRoute ซึ่งจะไปทำการสร้างหน้าจอใหม่ที่มีการ Return ค่า ListTitle สำหรับหน้านั้นพร้อมกับ Scaffold ที่มีชื่อ appBar ใหม่ว่า Saved Suggestion และในส่วน body: ก็จะแสดงคำที่ผู้ใช้เลือก

ในตอนท้ายของ codelab ก็จะเป็นการสอนการเปลี่ยน Theme สี ของตัว app ที่เราเขียน ด้วย Property ที่ชื่อ theme:

เป็นPart2ที่ไม่ยาวมากนัก แต่ตอนทำNavigator เพื่อเปลี่ยนไปหน้าจอถัดไปตอนเขียนโค๊ดอาจจะงงกับวงเล็บหน่อยเพราะซ้อนกันเยอะต้องมองภาพเป็นกลุ่มให้ดีๆ

แต่จากการที่รู้สึกว่าน่าจะมีตัวช่วยในการจัดการเรื่องของกลุ่มโค๊ดเหล่านี้ก็เลยไปค้นหามาพบว่าใน VSCode มี extension ที่ช่วยให้การเขียนโค๊ดสะดวกขึ้นอยู่หลายตัวที่อยากแนะนำคือให้ติดตั้ง extension ที่ชื่อ Bracket Pair Colorizer2 , Bracket Select , indent-rainbow ก็จะช่วยทำให้ดูโค๊ดได้เป็นกลุ่มก้อนเข้าใจง่ายมาขึ้นดังภาพ