Home
StatelessWidget on Flutter App
ต่อไปเราจะเขียนโค้ด ที่ถูกต้อง หรือมี ความซับซ้อนมากขึ้น โดยต่อยอดจาก การใช้ AppBar บน Scafold ครั้งที่แล้ว ในการเขียน Widget จะสามารถเขียนได้ 2 แบบ
- StatelessWidget
- StatefulWidget
สอง อันนี้แตกต่างกัน ที่ ถ้าเราต้องการให้ Widget มีการแชร์ หรือ ใช้ ข้อมูล ที่อยู่นอก คลาส จะใช้ StatefulWidget แต่ถ้าต้องการให้แสดง หรือ โชว์ เฉยๆ ใช้ StatelessWidget วันนี่ มาสเตอร์ จะใช้ StatelessWidget
เริ่มจากการสร้างคลาส App ที่จะเก็บไว้ใน src สร้างโฟวเตอร์ เปล่าๆ ก่อน
ได้มาละ โฟวเตอร์ src ที่จะเก็บ คลาส App.dart ที่เราจะสร้างขึ้น
Floating Action Button on Flutter App
มาถึง ตอนทำปุ่ม Floating Action Button บน Flutter กันครับ
ขอเริ่มที่ Scaffold Class จาก ตอนที่แล้วที่เราสร้าง AppBar จำได้นะ ?
ครั้งที่แล้วเราถึงตอนนี่
วันนี่เราจะเพิ่ม ปุ่ม Floating Action Button ไปดูรายละเอียดเพิ่มที่ https://docs.flutter.io/flutter/material/FloatingActionButton-class.html หรือ จะมาเรียนกับมาสเตอร์ แบบ ตัวต่อตัว ที่ https://www.androidthai.in.th/private-project-android-flutter-course.html
AppBar Scaffold on Flutter App
จากบทความครั้งที่แล้วเราสามารถ เรียกใช้ Scaffold มาจัดการ Widget ต่างๆ ที่จะแสดงบนจอของเรา มาที่นี่ เราจะมาใส่รายละเอียดให้ Scaffold บ้าง
เห็น AppBar ไหม ? วันนี่เราจะมา ลุย Properties ตัวนี่กัน
เริ่มจาก ครั้งที่แล้ว
Call Scaffold คลาส แต่ยังไม่ได้ ทำอะไร ?
Scaffold Class on Flutter App
จากครั้งที่ แล้ว ในบทเรียนการเขียนโค้ดบน Flutter https://www.androidthai.in.th/private-project-android-flutter-course.html
เราสร้าง Widget Text ที่แสดงข้อความ This is Home บน Screen
แบบนี่ แสดง ได้แต่ไม่สวย ? แล้วจะทำอย่างไร ?ให้สวย
Scaffold Class คือคำตอบสุดท้าย https://docs.flutter.io/flutter/material/Scaffold-class.html มี Widget สวยๆ ให้เราเรียกใช้มากมาย
MaterialApp on Flutter
หลังจากที่เราได้ Create Flutter Project ได้แล้ว https://www.androidthai.in.th/android-flutter/253-create-flutter-project-hello-world-on-vs-code.html ที่นี่เราจะมาต่อยอดโดย เราจะเรียนรู้ การใช้ งาน MaterialApp เพื่อใช้ในการความคุม การแสดงผลของหน้าจอ ส่ิงแรกที่เราต้องทำคือ ลบโค้ดทั้งหมด ของ main.dart ก่อนครับ
ต้อนนี่เราอยู่ที่ main.dart ที่อยู่ใน โฟวเตอร์ lib
Control a หรือ เลือกทั้งหมด
ลบทิ้งเลยครับ หรือ กด delete
มาที่ Terminal กด r
ที่ Simulator จะแสดงผล Error แบบนี่ ไม่ต้องตกใจครับ ก็เราไปลบโค้ด Flutter ของมัน ไง ? รอแป้ป
Create Flutter Project Hello World on VS code
ตามหัวข้อเลย ครับ การสร้าง โปรเจ็ค Flutter จาก ศูนย์ เป็น ส่วนหนึ่งของ คอร์ส สอน Flutter ตัวต่อตัว. คอร์สนี้ครับ https://www.androidthai.in.th/private-project-android-flutter-course.html เริ่มจากการ cd เข้าไปยัง Workshop ที่เราต้องการเก็บ Project Flutter
ถ้าเป็น แมค ใช้คำสั่ง pwd เช็ค ว่าเราอยู่ที่ path ที่ต้องการแล้วได้นะ
ใช้คำสั่ง flutter create ตามด้วยชื่อของโปรเจ็ค Flutter ที่ต้องการในที่นี่ มาสเตอร์ จะใช้ hello_flutter อ้อ ชื่อโปรเจ็ค อักษร ตัวเล็กเท่านั้นนะครับ
รอ ครับ
