Copyright 2024 - Custom text here

พอดีน้องที่มาเรียน Flutter ที่ สถาบัน มาสเตอร์ ถามนะครับ เลย ทำเป็น Blog ดี กว่า การใช้ปุ่ม RaisedButton คลิกแล้วให้ ย้ายการทำงาน หรือ เปลี่ยนหน้า จากหน้าแรก ไปหน้าที่สอง ทำอย่างไร ?

   

จากโจทย์ข้างบนเลยครับ คลิกที่ปุ่ม Change Page และ ไปที่ secondPage สามารถคลิก Navigation Arrow กลับ main ได้ ทำอย่างไร ? มาเริ่มกันครับ

หลังจากที่เราได้สร้าง โปรเจ็คเปล่า Flutter เสร็จแล้ว http://androidthai.in.th/android-flutter/119-basic-flutter-step1-start-project-flutter 

มาสเตอร์ จะสร้างหน้าที่สอง โดยมีรูปภาพ เป็นองค์ประกอบ แต่เราต้องมีรูปก่อน ให้สร้าง โฟวเตอร์ images และ Paste รูปที่เราต้องการเข้าไปที่นี่ อ้อ อย่าลืมไป Config ที่ pubspec.yaml ด้วยครับ

โค้ดของ secondPage.dart จะเป็นแบบนี่ แสดงภาพตรงกลางจอ

กลัลมาที่ main.dart ให้คลาส _MainStatefulState ทำการสร้างปุ่ม RaisedButton โดย onPressed จะทำการสร้าง route ที่เป็น Object ของ MaterialPageRoute สุดท้าย Navigator push ไปที่ round ครับ

  

ลองทดสอบโค้ดก็จะสามารถคลิกที่ Change Page และได้ secondPage และ คลิกกลับได้จาก Arrow ครับ 

สามารถโหลด Source Code ได้ที่ https://github.com/masterUNG/rounting2 

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

privateProject2019v1

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

privateAndroid2019v1

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

privateIos2019V1

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

privateFlutter2019v1

f t g