Copyright 2024 - Custom text here

การสร้าง 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 ครับ

 

 

 

 

 

 

 

 

 

 

 

 

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

privateProject2019v1

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

privateAndroid2019v1

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

privateIos2019V1

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

privateFlutter2019v1

f t g