สอน flutter โดย DIY Recipe Project | EP.1 Scaffold, Stateful, Stateless, Routing

สวัสดีครับ วันนี้เจ้าของบล๊อค อยากจะฝึกเขียน Flutter จึงคิดหาโปรเจคเล็กๆทำเป็นการฝึก เป็นการสอน ไปด้วยเลย โดย แอพที่จะทำมีชื่อว่า DIY Recipe Project ครับผม ตามชื่อนะครับ ก็คือ สูตรอาหารแบบคิดเอาเอง ^.^ ใครที่ยังไม่ได้ลง Flutter สามารถดูวิธีลงตามนี้ได้เลยครับ

เริ่มแรก สร้างโปรเจคกันเลยนะครับ เมื่อสร้างเสร็จ ให้ lib/main.dart
จะได้โค๊ดประมาณนี้
จากโค๊ดนี้เรามีสิ่งที่ต้องสนใจมีอยู่หลักๆ คือ Scaffold
, StatefulWidget
, StatelessWidget
แล้วมันคืออะไรหละ
Scaffold
Scaffold is implements the basic material design visual layout structure. https://api.flutter.dev/flutter/material/Scaffold-class.html
scaffold
เป็นก็คือ การ implement ตัว material design มาเป็น base structure ของ application / view
StatelessWidget
A widget that does not require mutable state. https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html
เป็น widget/view
ที่ Class ข้างในจะต้องมีค่าที่คงที่หรือค่าสถานะต่างๆต้องไม่เปลี่ยน
จากโค๊ดจะเห็นว่า MyApp
จะไม่มีการเก็บตัวแปร หรือ ค่าที่ใส่เข้าไป ใน widget
จะไม่มีการเปลี่ยนแปลงในอนาคต
Stateful
A widget that has mutable state. https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html
เป็น widget/view
อาจจะมีการเปลี่ยนแปลงข้อมูลในอนาคต
จากโค๊ดจะเห็นว่ามีการ ประกาศ ตัวแปล title
ไว้ เพื่อรับค่า String
เข้ามาใน widget/view
เมื่อใดที่ title ได้รับค่ามา widget/view
จะมีการเปลี่ยนแปลงตามค่า title
จึงทำให้ MyHomePage
นี้ อยู่ในรูปแบบ Stateful
Routing
หัวข้อต่อไปเป็นการ routing
ให้กับแอพของเรา เปลี่ยนหน้าไปมาได้ โดย การ routing
จะมีอยู่ 2 แบบ คือ Push
และ PushNamed
Push
เป็นการ push
โดย กำหนด จาก Class
ว่าจะให้ push
ไปที่ Class
ไหน
PushNamed
เป็นการ push
โดยกำหนดจาก name
ว่าให้ชื่อนี้ไป ที่ Class
ไหน
เจ้าของบล๊อคชอบแบบที่ 2 มากกว่า บทความนี้จึงจะวิธีที่ 2 มาใช้ ก่อนอื่นให้สร้าง base route กันก่อน ตามนี้
จากนั้นสร้างหน้า เพจ recipe_form.dart
ซึ่งหน้านี้เราจะทำ form
ให้กรอกข้อมูลต่างๆ สูตรอาหารต่างใส่เข้าไป
โอเครครับ จากนี้ ถ้าเราจะเปลี่ยน หน้า จาก มาที่คลาส RecipeFormPage เพียงแค่กำหนดใช้คำสั่ง Navigator.pushNamed(context, "/recipe_form");
มาทำให้ FloatingButton
จากหน้าแรก กดแล้วไปหน้า RecipeFormPage
กัน
เพียงเท่านี้ เราก็สามารถ คลิกปุ่ม floating
แล้วไปหน้า RecipeFormPage
ได้แล้ว
บทความนี้เจ้าของบล๊อคใช้ Gallery Project เป็นโปรเจค CaseStudy เพราะผู้พัฒนา Flutter เป็นเจ้าของ project เอง ถ้าเข้าไปศึกษาตัว github ดู จะเห็นว่า ตัว routing ก็ ศึกษามาด้วยเหมือนกันครับ .....บทความต่อไป เราจะมาทำ Form กันครับ
ปล. ศึกษา gallery project ได้ลิงค์ด้านล่างเลยครับ.
