web analytics

บันทึกการเรียน Flutter ของผม ตอนที่ 3

สวัสดีครับ บทความนี้เป็นบันทึกการเรียน Flutter + ภาษา Dart ของผม ซึ่งตัวผมในตอนนี้ยังไม่มีความรู้เรื่อง Flutter และ Dart เท่าไหร่นัก บทความนี้ก็เลยมาบันทึกการเรียน และการทำความเข้าใจเกี่ยวกับ Flutter ของผมครับ โดยบทความนี้จะลองทำตาม Tutorial Codelab ที่สอนในเว็บของ Flutter ครับ อันนี้เป็นตอนต่อเนื่องจากตอนก่อนหน้านี้ครับ

https://benzneststudios.com/blog/flutter/my-flutter-class-ep-2/

สร้างที่เก็บคำ

เพิ่มตัวแปร List สำหรับเก็บคำที่เรากดบันทึกไว้ ใน RandomWordsState

เพิ่มไอคอนให้กับแถว

ที่ buildRow ก็ทำการเช็คว่า คำที่เรากำลังจะไปสร้างเป็น row มีอยู่ใน list หรือไม่ ถ้ามีก็แสดงไอคอนหัวใจแดง ไม่มีก็หัวใจว่าง
โดยเอาปใส่ที่ trailing ของ ListTile

ถ้าเขียนใน Android studio จะมีไอคอนกับสีขึ้นมาให้ดูด้านซ้ายด้วย

1

ลองรันดู จะมีรูปหัวใจขึ้น แต่ว่าจะยังกดอะไรไม่ได้ เพราะเรายังไม่ได้กำหนด action อะไรให้มัน

2

เพิ่ม Action ให้กับแถว

เพิ่ม onTap ใน ListTile ก็คือให้กดแล้วให้ทำอะไร ในที่นี้คือกดแล้วก็เอาคำนั้นไปใส่ใน list หรือถ้ามีอยู่แล้วใน list ก็ลบออก
ซึ่งตรงนี้เอง ไอคอนรุปหัใจจะต้องมีการเปลี่ยนแปลงทำให้ต้องอัพเดทหน้าจอ ดังนั้นควรใช้งานใน setState เพราะว่าพอเรา เรียก setState มันจะทำการ build Widget ใหม่

ลองรัน จะพบว่ามันกดหัวใจได้แล้ว

a1

เตรียมไอคอนสำหรับไปหน้าที่สอง

ต่อมา ทาง Codelabs ก็ได้สอนวิธี Navigate หรือก็คือเปลี่ยนหน้าไปหน้าใหม่ โดยจะทำการเพิ่มปุ่มไอคอนบนขวาก่อน
โดยเพิ่มที่ MyApp ตรง AppBar เลย

ตรงนี้ผมขอทำต่างกับใน codelabs เพราะผมแค่อยากทำให้มันแสดงหน้าใหม่แบบง่ายๆ ขอเริ่มจากสร้าง HomePage ที่เป็น StatelessWidget แล้วเอาพวก AppBar , Text ไปไว้ในนั้น ส่วน MyApp ไม่ต้องมีอะไรมาก แล้วก็กำหนด ไอคอนไว้ที่ AppBar และกำหนด onPressed ด้วย ซึ่งเอาพารามิเตอร์ให้มันตัวนึงคือ BuildContext

ส่วน navigateToSecondPage() ไว้ค่อยเขียนต่อ

5

ลองรันจะได้ไอคอน บนขวาเพิ่มเข้ามาแล้ว

4

ไปหน้าที่สอง

มาเขียน navigateSecondPage(context) ครับ ตรงนี้จะใช้คลาสชื่อว่า Navigator แล้วก็ใช้คำสั่ง push
หลังจากนั้นก็กำหนด Widget ให้ builder ว่าต้องการให้ทำอะไร ในที่นี้ผมให้มันวาง Text ตรกลางว่า Second Page

ลองรัน เย้ไปหน้าสองแล้ว แถมมีปุ่ม back ให้ด้วย นั่นก็เพราะว่า เราใช้คำสั่ง push นั่นเอง
มันจึงเหมือนเป็นการ push ไปใน Stack

a2

ดังนั้นมันเลยมีคำสั่ง pop ออกจาก Stack ด้วย ก็คือการกด back นั่นแหละ

หรือ ถ้าอยากไม่ให้มีปุ่ม back ให้มันเป็นการทับหน้าเดิมไปเลยจริงๆ ก็ใช้คำสั่งนี้

จบแล้ว

จบ Codelabs 2 ของ Flutter แล้วครับ ในบทความนี้ 2 ได้เรียนรู้เรื่องของตัวอย่างการใช้งาน ListView เพิ่มเติม แล้วก็ Navigation เพื่อเปลี่ยนไปหน้าที่สองครับ ทำให้ตอนนี้เข้าใจ flutter มากขึ้นแล้วละครับ ทั้งคอนเซ็ปและการใช้งาน Widget

ชักสนุกแล้วสิ..

Code ทั้งหมดของ main.dart

https://gist.github.com/benznest/43ce19d3d13ddeddb58c54216b22cc82