Copyright 2019 - Custom text here

Screen Shot 2562 01 23 at 163202

ต่อไปเราจะเขียนโค้ด ที่ถูกต้อง หรือมี ความซับซ้อนมากขึ้น โดยต่อยอดจาก การใช้ AppBar บน Scafold  ครั้งที่แล้ว ในการเขียน Widget จะสามารถเขียนได้ 2 แบบ

  • StatelessWidget
  • StatefulWidget

สอง อันนี้แตกต่างกัน ที่ ถ้าเราต้องการให้ Widget มีการแชร์ หรือ ใช้ ข้อมูล ที่อยู่นอก คลาส จะใช้ StatefulWidget แต่ถ้าต้องการให้แสดง หรือ โชว์ เฉยๆ ใช้ StatelessWidget วันนี่ มาสเตอร์ จะใช้ StatelessWidget 

Screen Shot 2562 01 23 at 164552

 

 เริ่มจากการสร้างคลาส App ที่จะเก็บไว้ใน src สร้างโฟวเตอร์ เปล่าๆ ก่อน

Screen Shot 2562 01 23 at 164605

ได้มาละ โฟวเตอร์ src ที่จะเก็บ คลาส App.dart ที่เราจะสร้างขึ้น

Screen Shot 2562 01 23 at 164623

ต่อไปสร้างคลาส

Screen Shot 2562 01 23 at 164634

ได้มาละ คลาส App.dart ที่เราจะมาทำ แอพ Flutter

Screen Shot 2562 01 23 at 164706

 บทแรก ของการเขียนโค้ด ภาษา Dart คือ import library ตัว material.dart มาใช้งานก่อนครับ

Screen Shot 2562 01 23 at 164711

 ได้มาละ package:flutter/material.dart

Screen Shot 2562 01 23 at 164742

 

ต่อไป สร้าง คลาส App

Screen Shot 2562 01 23 at 164810

 

แล้วค่อยมาไป extands StatelessWidget

Screen Shot 2562 01 23 at 164823

 

จะมี สีแดง ที่ App เพราะ ต้องการ เมธอด build 

 Screen Shot 2562 01 23 at 164915

 

สร้าง build  ที่จะ return ค่ากลับไป เป็น Widget

 Screen Shot 2562 01 23 at 164948

 

ให้ return MaterialApp กลับไป

Screen Shot 2562 01 23 at 165116

 

 กลับไป Cut ส่วนของ home: ที่อยู่ใน main.dart

Screen Shot 2562 01 23 at 165145

 

 มา paste ไว้ที่ App.dart

Screen Shot 2562 01 23 at 165303

 กลับมาที่ main.dart  เราต้องการใช้ คลาส app.dart ที่นี่ ต้อง import app.dart เข้ามาครับ Format เป็นแบบนี้

Screen Shot 2562 01 23 at 165310

ที่นี่เราก็ สามารถ call คลาส App ที่ main.dart ได้ละ

Screen Shot 2562 01 23 at 165345

ใน Flutter จะทำงานที่ main.dart และ ที่ main.dart จะทำงานที่เมธอด main() ก่อน มาสเตอร์ จะให้ทำคำสั่ง runApp และ เลือก คลาส App() แบบนี้ครับ

Screen Shot 2562 01 23 at 165427

ลอง flutter run จะได้ผลลัพธ์ เป็นแบบนี่ 

Screen Shot 2562 01 23 at 165434

สามารถดักจับ Event จากการคลิก floating action button และ มา print บน Console ได้ แบบนี้

Screen Shot 2562 01 23 at 165444

 สรุปการ Create Widget ที่ดีควร แยก มาสร้างข้างนอก main.dart

Screen Shot 2562 01 23 at 165457

สร้าง คลาส ที่ extands StatelessWidget แล้วใช้ เมธอด build ให้ return Widget ที่ สร้างกลับไป

Screen Shot 2562 01 23 at 165448

แล้วใช้ เมธอด main() ให้  call มาแสดงบน Screen ครับ สำหรับใครที่ งงๆ ลองหาเวลา สักสองวัน มาเรียน Flutter ตัวต่อตัวกันครับ ลองดูรายละเอียดที่ https://www.androidthai.in.th/private-project-android-flutter-course.html

 

 

 

 

 

 

 

 

 

 

 

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

privateProject2019v1

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

privateAndroid2019v1

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

privateIos2019V1

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

privateFlutter2019v1

f t g