บทความ Flutter

Print

การส่งข้อมูล ระหว่าง Page ด้วย Route บน Flutter

Written by มาสเตอร์ อึ่ง
Details: Category: บทความ Flutter | Published: 03 August 2018 | Hits: 13956

จากบทความนี่ http://androidthai.in.th/android-flutter/142-route-and-raisedbutton-to-new-page-on-flutter การสลับ Page โดยการใช้ Route มีน้องๆ ถามว่าถ้า Route ไปมา ระหว่าง Page และ ต้องการ แนบ ข้อมูล ไปมาด้วย คร้ายๆ PutExtra Intent บน Java Android จะทำอย่างไร ? 

 

โจทย์ เป็นอย่างนี่นะครับ มาสเตอร์ จะสร้าง Page บน Flutter สอง Page 

  1. HomePage
  2. NextPage

ที่ Home จะมี TextField และ Button ถ้าเรากรอง อะไร ? ใน TextField และ กด Button สิ่งที่กรอกจะไปแสดงที่ Text บน NextPage ครับ เราจะได้เรียนรู้การส่ง ข้อมูล ผ่าน Page โดยการทำ Route มาเริ่มต้นกันครับ

 

 

สร้าง โปรเจ็ค Flutter. และที่ main.dart โค้ดให้ได้แบบนี้

ที่ TextField มาสเตอร์ จะให้ Controller โยนค่าที่กรองไปที่ Object TextField

และ มาสร้อง nextPage.dart โดย ประกาศตัวแปร valueFromHome ให้รับค่า จาก Widget นำมาแสดงใน body แบบนี้

กลับมาที่ main.dart มาสเตอร์ ทำ Route และ Push ไป homeRoute แบบนี้ครับ

ลองทดสอบโค้ด ลองพิมพ Doramon ไปที่ TextField และ click Button ผลที่ได้จะ Replace Page จาก HomePage ไป NextPage แบบนี้ครับ  สามารถดู หรือ โหลด Source Code ของ Workshop นี่ที่ https://github.com/masterUNG/pass_data ครับ