Print
Details: Category: บทความ Flutter | Published: 17 July 2018 | Hits: 5061

การสร้าง Snackbar บน Flutter ครับ พี่ๆน้องๆ สามารถไปโหลด โค้ดตัวอย่างที่ https://github.com/masterUNG/snackbar 

โจทย์เป็นอย่างนี่นะครับ เดี๋ยวเราจะลองทำ Workshop บน Flutter Platform ง่ายๆ โดยการ คลิก Icon Info ที่อยู่บน appBar และเปิด SnackBar ออกมา สามารถคลิก Action ที่ SnackBar ได้ ครับ เรามาเริ่มกันเลยครับ

เตรียมสร้างโปรเจ็คเปล่าๆ ของ Flutter Platform แบบนี่ (http://androidthai.in.th/android-flutter/120-standart-structure-coding-flutter-app)

ที่ appBar

จัดรูปแบบ ซะหน่อยเดี๋ยวดูงง

มาสเตอร์ เพิ่ม action เข้าไปครับ

กำหนด IconButton 

กำหนดภาพของ icon ในตัวอย่าง มาสเตอร์ เลือก info ครับ

ลองทดสอบโค้ด จะเห็น ไอค่อน info สำเทาๆ (คือยังไม่กำหนด onPressed นะเป็นเทา ถ้ากำหนดจะเป็นสีขาว)

 

กำหนด onPressed

มาสเตอร์ ออกไปสร้าง เมธอด showSnackBar

โดยกำหนดว่า ถ้า onPressed (คลิกบน ไอค่อน info) ให้ไปทำงานที่ เมธอด showSneackBar โดย เมธอด showSnackBar และ พิ่มพ์ Show Snackbar from Click info บน Console ครับ

เดีียวมาสเตอร์ ของ สร้างเป็นตัวแปร messageString ดีกว่า

 

ประกาศตัวแปร snackBar

กำหนดข้อความที่จะแสดงบน SnackBar

 

ประกาศตัวแปร ประเภท GlobalKey

 


 มาสเตอร์ตั่งชื่อว่า _scaffold

นำ key ไปประกอบแบบนี้

 

ลองทดสอบโค้ด และ คลิกที่ Icon Info

จะเห็น SnackBar ปรากฎแบบนี้

ภาพเต็มๆ ครับ

เราสามารถกำหนด Duration หรือ เวลาของการแสดง SnackBar ได้

กำหนด สี background ได้

ชนิด และ ขนาดของตัวอักษร

หรือกำหนด action ถ้าคลิกที่ Snackbar

จะเห็นว่าที่ SnackBar จะมี Text ว่า Click SnackBar คลิกแล้วจะได้ ข้อความ Action Click SnackBar บน Console ครับ สำหรับใครที่ไม่ทันไป โหลด Source Code ของ มาสเตอร์ ที่ https://github.com/masterUNG/snackbar ครับ