web analytics

Flutter : รู้จักกับ Route Transition

cove

สวัสดีผู้อ่านครับ เราคงจะเคยทำแอปให้เปลี่ยนหน้านึงไปอีกหน้านึง ซึ่งใน Flutter ก็ทำได้ง่ายมาก แต่ว่าการทำ Animation หรือการ custom route transition ก็มีรายละเอียดที่ต้องรู้อยู่บ้าง ในบล็อกนี้จะพามารู้จักพื้นฐานของการทำ Routing ใน Flutter รวมถึงไปลองเล่น Animation route transition แบบต่างๆครับ

 

เริ่มต้น

สร้าง widget สำหรับหน้าแรก โดยมีปุ่มสำหรับกดเพื่อเปลี่ยนไปหน้าที่สอง

1

 

สร้างหน้าที่สอง

สร้างอีก widget class สำหรับหน้าที่ 2

2

 

Navigator

การเปลี่ยนหน้าจะใช้ class ที่เรียกว่า Navigator โดยตัวมันเองจะทำหน้าที่จัดการ Stack ที่เก็บ route
ดังนั้นเลยมี method ให้เรียก push / pop

3

 

วิธีเปลี่ยนหน้าคือ push route เข้าไป

วิธีกลับหน้าเดิม คือ pop

 

หากใช้ pushReplacement  มันจะ pop อันเก่าก่อนแล้ว push อันใหม่ ทำให้อาจไม่มีปุ่ม back

a2

 

MaterialPageRoute

มารู้จัก PageRoute ตัวแรก คือ MaterialPageRoute สิ่งที่ MaterialPageRoute ทำคือ เพิ่ม Animation ของ transition ให้กับ route แบบที่เราเห็นบ่อยๆใน Android

วิธีการใช้ คือ เพิ่ม function builder ที่ return Widget ที่เราต้องการให้แสดง

a1

 

CupertinoPageRoute

PageRoute อีกตัว คือ CupertinoPageRoute

ก่อนอื่น import cupertino.dart

 

สิ่งที่ CupertinoPageRoute ช่วยคือ การทำ transition เปลี่ยนหน้าแบบที่เราเห็นใน iOS
วิธีการใช้ก็คล้ายกับ MaterialPageRoute

a3

 

Route name

การเปลี่ยนหน้าอีกวิธีคือ การสร้างชื่อเรียกให้มัน
ก่อนอื่นสร้าง Map สำหรับเก็บ key และ route

 

เพิ่ม รายชื่อ route ให้กับ MaterialApp

 

วิธีการใช้คือ ผ่าน Navigator.pushNamed แล้วกำหนดชื่อ route ที่ต้องการ

a1

 

จะเห็นว่า Animation ของ transition เป็นของ MaterialRoutePage ทั้งๆที่เราไม่ได้ใช้ MaterialRoutePage เลย ที่เป็นแบบนี้เพราะการใช้ route name ผ่าน MaterialApp มันจะใช้ transition แบบเดียวกับ MaterialRoutePage ให้อัตโนมัติ

ถ้าอยากได้ transition แบบ CaputinoRoutePage โดยใช้วิธีกำหนด route name ก็ต้องใช้ CaputinoApp แทนนั่นเอง ซึ่งในรายละเอียด widget จะแตกต่างจาก MaterialApp อยู่พอสมควร

 

PageRouteBuilder

จาก MaterialRoutePage และ CaputinoRoutePage  ก็เป็นแค่ตัวอย่างการทำ route transition ที่ Flutter ทำไว้ให้ กรณีที่เราอยากทำ route transition ของเราเอง จะต้องใช้ PageRouteBuilder

ซึ่ง PageRouteBuilder ก่อนอื่นจะต้องกำหนด pageBuilder ให้มัน

ตอนนี้จะยังไม่มี animation

a4

 

SlideTransition

โดยตัวอย่างนี้ผมจะใช้ SlideTransition คือ animation การเคลื่อนที่ แล้วก็กำหนดระยะเวลา คือ 3 วินาที ซึ่งการเคลื่อนที่นั้นจะระบุด้วย Offset ตำแหน่ง (x,y) โดยใช้ตำแหน่งมุมบนซ้ายของหน้าจอเราเป็นหลัก ซึ่งโดยปกติจะอยู่ที่ตำแหน่ง (0,0)

5a

 

และการ animate จากค่าหนึ่งไปอีกค่าหนึ่งจะใช้คลาสที่ชื่อว่า Tween แค่กำหนด begin , end ให้มัน
ดังนั้นถ้าผมบอกว่าให้เคลื่อนที่จาก (-1,0) ไป (0,0) จะเขียนได้แบบนี้

 

ผลทีไ่ด้คือ

a6

 

ทีนี้มาลองกำหนด animation จริงๆ โดยการเพิ่มส่วนของ transitionsBuilder ให้กับ PageRouteBuilder
ซึ่งก็ให้ return SlideTransition ตำแหน่งคือ Tween (-1,0) ไป (0,0) ส่วน child ก็คือ widget ที่ได้จาก pageBuilder

 

ลองรัน

a5

 

 

ลองทำอีกกรณี คือ Slide จากล่างขึ้นมา ก็คือ (0,1) ไป (0,0)

a7

 

ลองใช้แบบมีทศนิยมบ้าง ดูว่าจะเกิดอะไรขึ้น

a9

 

Curve

Animation ยังสามารถใส่ interpolator ได้ด้วย ใน Flutter เรียกว่า Curve
มันก็คือ Animation แบบมีลูกเล่น เช่น ช้าๆแล้วค่อยๆเร็วขึ้น ซึ่งมีให้เลือกอยู่หลายแบบ

a8

 

สามารถลองเล่น Curve แบบต่างๆ ได้ตามนี้เลย

 

ScaleTransition

นอกจาก SlideTransition ก็มี transition อีกหลายแบบ เช่น scale
คือทำจากเล็กไปใหญ่ หรือใหญ่มาเล็ก โดยค่า จะเริ่มจาก 0 และ 1 คือขนาดปกติ

a10

 

FadeTransition

Animation ที่เล่นกับ Opacity โดย 0 คือโปร่งใส และ 1 คือแสดงผลชัดเจน

a11

 

Multi-transitions

เราสามารถนำ transition หลายๆแบบมาใช้ร่วมกันได้ โดยการซ้อน transition เป็น child ของอีก transition นึง

a12

 

ทำ route transition class ให้ใช้ง่าย

เพื่อให้การเปลี่ยนหน้ากับ transition ใช้งานง่ายขึ้น ควรสร้าง class จัดการ route transition ของเราเอง
โดย extends PageRouteBuilder

 

จากนั้นเพิ่ม widget , duration ให้รับ parameter จากภายนอก

 

แล้วก็ copy code PageRouteBuilder มาใส่ใน super ของ class เรา

 

ทีนี้ ตอนเรา push เราก็แค่เรียก route จาก class ของเราแทน ซึ่งจะมาพร้อมกับ Aniamtion transition แล้ว

 

สรุป

โดยปกติการเปลี่ยนหน้าจะใช้คำสั่ง push/pop จาก Navigator ซึ่งจะเหมือนกับเพิ่ม route ลงไปใน Stack ซึ่งการสร้าง route ก็มีให้เลือก คือใช้จาก MaterialPageRoute หรือ CupertinoPageRoute ทั้งสองตัวคือ transition ที่ทาง Flutter เตรียมไว้ให้ แต่ถ้าเราอยาก custom ของเราเองก็ต้องใช้ PageRouteBuilder ที่ต้องเขียน transiton เอง โดยมี ให้เลือกหลายแบบ เช่น slide, scale, fade และอีกหลายตัว

 

ตอนหน้า

เนื้อหาต่อเนื่องจากเรื่องนี้ คือ Hero Widget ที่จะใช้คู่กับ Route Transition ครับ เรียนเชิญอ่านได้

Flutter : Hero Widget