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

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

Install

Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems.

Flutter Logo

เริ่มแรก สร้างโปรเจคกันเลยนะครับ เมื่อสร้างเสร็จ ให้ 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 ได้ลิงค์ด้านล่างเลยครับ.

flutter/gallery

Flutter Gallery is a resource to help developers evaluate and use Flutter - flutter/gallery

GitHubflutter

Navigate with named routes

How to implement named routes for navigating between screens.

Flutter Logo

personal-by-molysulfur/diy-recipe-flutter

DIY Recipe Project. Contribute to personal-by-molysulfur/diy-recipe-flutter development by creating an account on GitHub.

GitHubpersonal-by-molysulfur