Copyright 2019 - Custom text here

 จากบทความที่แล้ว ที่เราทำ StatelessWidget

Screen Shot 2562 01 24 at 042122

เมื่อ ข้อมูล ในตัวแปรใน คลาส App ไม่มีการเปลี่ยนแปลง. เราสามารถใช้ StatelessWidget ได้ แต่ ถ้ามี การเปลี่ยนแปลง ควรใช้ StatefulWidget ดีกว่า ครับ มาดูนี่

Screen Shot 2562 01 24 at 042243

 โจทย์ เราเป็นแบบนี่เดี๋ยวเราจะสร้าง คลาส ที่ทำการ สร้าง  Widget App แบบ Array ไปแสดงใน Screen โดยใน Widget App จะมี การเปลียนแปลง ตัวแปร counter ด้วย

Screen Shot 2562 01 24 at 042405

แบบ เดิมๆ ที่เราใช้ StatelessWidget หลักการของ Flutter จะเป็นการ rander App มาแปะ บน Screen ถ้าเรา ทำให้เกิดการเปลี่ยนแปลง จาก 0 ไปเป็น โน้นนี่นั้น การแสดง จะเอา ค่าที่ Rander ได้ครั้งแรกไปแสดงครับ  ไม่เป็นไร ? งงๆ งั้นเราไปทำ Workshop กันก่อน เดี๋ยวมาสเตอร์ จะกลับมา อธิบายใหม่ ครับ

Screen Shot 2562 01 24 at 042629

 

เปิดโปรเจ็ต เก่าของเราขึ้นมาเลยครับ ก่อนอื่นของนอกเรื่องก่อน มาสเตอร์ แนะนำให้ flutter doctor เพื่อตรวจสอบ Flutter ของเราว่ายัง ทำงานได้ดีอยู่ไหม ?

 Screen Shot 2562 01 24 at 042638

ถ้าถูกหมด แบบนี้ถือว่า โอเคครับ

Screen Shot 2562 01 24 at 042741

 

ต่อไป ทดสอบโค้ดโดย flutter run ได้เลย และเราจะต่อยอดจากตรงนี่

Screen Shot 2562 01 24 at 042829

ที่ คลาส App.dart เราจะมีการทำ StatelessWidget ไว้แบบนี้

Screen Shot 2562 01 24 at 042922

มาสเตอร์ สร้างคลาสใหม่ ? ชื่อว่า AppState 

Screen Shot 2562 01 24 at 043028

 

extends State<App> โดย คลาส AppState จะทำหน้าที่ในการสร้าง App เป็น Array เรื่อยๆ ครับ

 Screen Shot 2562 01 24 at 043059

 

ขึ้นไปที่ App ให้ Drack ตามที่เห็น มาสเตอร์ เลือกส่วนเฉพาะ เมธอด build

Screen Shot 2562 01 24 at 043147 

 เอาไป paste ใส่ AppState ด้านล่าง

Screen Shot 2562 01 24 at 043312

 

กลับมาที่ App เปลี่ยนการ extands จาก StatelessWidget ไปเป็น StatefulWidget

Screen Shot 2562 01 24 at 043344

 

สร้าง เมธอด creeateState แบบนี้

Screen Shot 2562 01 24 at 043408

 

ให้ เมธอด createState() นั้น return ออฟเจ็ค  AppState ครับ

 Screen Shot 2562 01 24 at 043509

 

ส่วนนี่ AppState  

Screen Shot 2562 01 24 at 043526

 ลองพิมพ์ r หรือ จะ Control c และ ตามด้วย flutter run จะได้ผลแบบ ตอนเป็น StatelessWidget

 Screen Shot 2562 01 24 at 043805

 

ที่นี่ มาสเตอร์ จะเพิ่ม ตัวแปร counter มีค่าเริ่มต้น เป็น 0 และให้ แสดงค่า counter ที่ Text Widget ที่ จะอยู่ที่ body แบบนี้

Screen Shot 2562 01 24 at 043824

 

จะเห็น Text Widget ที่ แสดงค่าของ counter แบบนี้

Screen Shot 2562 01 24 at 044446

 

จำ ที่ เรา ดักจับ Event ของ Floating Action Button ได้ นะ ? มาสเตอร์ จะเพิ่มค่าของ counter และ ให้ setState คอย Monitor ครับ

Screen Shot 2562 01 24 at 044458

พิ่มพ์ r หรือจะ Control c และ flutter run 

Screen Shot 2562 01 24 at 044500

ลอง คลิกที่ Floating Action Button และ ดูการเปลี่ยนแปลงที่ Text Widget Counter ครับ

Screen Shot 2562 01 24 at 044506

 

Screen Shot 2562 01 24 at 044515

 

Screen Shot 2562 01 24 at 044521

ครับ จะได้แบบนี้

Screen Shot 2562 01 24 at 044707

 

เริ่มจาก คลาส App จะ. return AppState() ไปที่ main.dart

Screen Shot 2562 01 24 at 044731

 

เมื่อ onPressed ทำงาน จะเพิ่มค่าให้ counter และ ไปแสดงผลที่ Text Widget

 Screen Shot 2562 01 24 at 044739

กลับมาดู ภาพนี่ใหม่ ? ตอนเรายังไม่ได้ใช้ StatefulWidget สังเกตุ ทุกครั้งที่เรา คลิกที่ Floating Action จะ Rander App ไปแสดง แต่ถ้า counter = 0 จะ แสดงต่อไป ไม่สามารถเพิ่มค่าได้

Screen Shot 2562 01 24 at 044759

แต่ถ้า เราใช้ StatefulWidget ตัว counter จะทำงานละ

Screen Shot 2562 01 24 at 044816สรุปง่ายๆ เป็นแบบนี่ครับ ไม่งง นะ แต่ถ้างง มานี่ครับ https://www.androidthai.in.th/private-project-android-flutter-course.html มาเรียน Flutter ตัวต่อตัวกันครับ

 

 

 

 

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

privateProject2019v1

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

privateAndroid2019v1

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

privateIos2019V1

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

privateFlutter2019v1

f t g