Google Flutter วันละนิดกับโค้ชพลวันนี้ เราจะมาพูดถึง Navigation Transition การสร้าง Animation สวยๆ ให้กับ Widget ที่มีเนื้อหาเดียวกัน แต่ในเมื่อต้องถูกแสดงในทั้ง 2 ส่วนของแอพเรา โดยเราสามารถเชื่อมโยงทั้ง 2 ตัวได้ง่ายๆ ด้วย Hero Widget ครับ
เข้าใจความสำคัญของ Navigation Transition กันหน่อย
จริงๆ Transition นั้นไม่ได้ เอาไว้แสดงความคูล ความวื้ด ความเท่ ในการเปิดหน้าแอพใหม่ของเราแต่อย่างใด
แต่หน้าที่ของ Transition คือการเรียกความสนใจของผู้ใช้ ระหว่างการเปลี่ยนหน้าแอพ ให้เห็นถึงความสัมพันธ์ของข้อมูลระหว่างการเปลี่ยนผ่านไปสู่หน้า User Interface อีกแบบหนึ่ง
Navigation transitions use motion to guide users between two screens in your app. They help users orient themselves by expressing your app’s hierarchy, using movement to indicate how elements are related to one another.
Material Design Guideline
ซึ่งกลไก Transition นี้ ถ้าเลือกใช้ได้เหมาะสมจะทำให้ผู้ใช้ไม่ “หลุด” ออกจากการใช้งานแอพของเรา และยังสามารถนำเสนอการใช้งานข้อมูลได้ลื่นไหลอีกด้วย
กรณีที่เราพบบ่อยๆ จะเป็น Parent-child transitions ที่มีการเชื่อมโยงข้อมูลเดียวกันจากทั้ง 2 หน้าแอพ
เช่น
- มีรูปของสินค้าในรายการ ListView (หน้าที่ 1)
- หลังจากกดเลือกรายการจากหน้าแรกแล้ว
- รูปสินค้าเดียวกัน กลายเป็นภาพขนาดใหญ่ในหน้ารายละเอียดสินค้า (หน้าที่ 2)
ซึ่งการทำ Parent-child transitions นี้ ทางทีม Flutter เขาได้เตรียมเครื่องมือสุดสะดวกเอาไว้ให้เราใช้เชื่อมโยง Widget หรือเนื้อหาจากทั้ง 2 หน้าแล้ว
ชื่อว่า Hero Widget ครับ มาเรียนรู้วิธีใช้งานไปพร้อมกันเลย
เรื่องที่เราจะคุย และทำกันในคลิปวิดีโอ
- ทำความเข้าใจการเปลี่ยนหน้าแอพด้วยระบบ Route Navigation
- วิธีการใช้ Hero Widget
- วิธีการกำหนด Tag เชื่อม Widget ระหว่าง 2 หน้าแอพ
- เข้าใจการทำงานของ Hero transition ระหว่างใช้งาน Navigator.push
- เล่นกับ Navigation Transition ของ Widget
สามารถโคลนโปรเจคมาทำไปด้วยกันได้จาก
https://github.com/teerasej/nextflow-widget-today-hero-transition-1
ดูวิดีโอทั้งหมดในซีรี่ย์ Flutter 3 นาที
และยังสามารถกดดูวิดีโอทั้งหมดในซีรี่ส์ Flutter 3 นาที ได้ที่นี่เลย อย่าลืมกด subscribe พร้อมเปิดกระดิ่งแจ้งเตือนล่ะ
เริ่มต้นเรียนรู้สร้างแอพ iOS และ Android ด้วย Google Flutter ไปกับโค้ชพล
✅ เหมาะสำหรับผู้เริ่มต้น
✅ เขียนครั้งเดียว ใช้ได้ทั้งระบบ iOS และ Android ประหยัดเวลา
✅ เรียนได้ทุกเวลา ไม่มีวันหมดอายุ
✅ ได้รู้ตั้งแต่วิธีติดตั้งโปรแกรม จนเอาขึ้นApp Store และ Play Store
✅ ได้ทำแอพของจริง เริ่มต้นจาก 0 ทุกโปรเจค มีระบบถามตอบ กรณีติดปัญหา