Print
Details: Category: บทความ Flutter | Published: 23 January 2019 | Hits: 5436

 

หลังจากที่เราได้ Create Flutter Project ได้แล้ว https://www.androidthai.in.th/android-flutter/253-create-flutter-project-hello-world-on-vs-code.html ที่นี่เราจะมาต่อยอดโดย เราจะเรียนรู้ การใช้ งาน MaterialApp เพื่อใช้ในการความคุม การแสดงผลของหน้าจอ ส่ิงแรกที่เราต้องทำคือ ลบโค้ดทั้งหมด ของ main.dart ก่อนครับ

Screen Shot 2562 01 23 at 043006

ต้อนนี่เราอยู่ที่ main.dart ที่อยู่ใน โฟวเตอร์ lib

Screen Shot 2562 01 23 at 043021

Control a หรือ เลือกทั้งหมด

Screen Shot 2562 01 23 at 043033

ลบทิ้งเลยครับ หรือ กด delete

Screen Shot 2562 01 23 at 043105

มาที่ Terminal กด r

Screen Shot 2562 01 23 at 043107

 ที่ Simulator จะแสดงผล Error แบบนี่ ไม่ต้องตกใจครับ ก็เราไปลบโค้ด Flutter ของมัน ไง ? รอแป้ป

 Screen Shot 2562 01 23 at 043146

เราต้องการใช้ คลาส MaterialApp มาจัดการ Screen ต้อง import Library เข้ามาก่อนครับ

Screen Shot 2562 01 23 at 043154

 

กฏข้อแรก ของการโค้ด Flutter ต้อง Import Library materila.dart ครับ

Screen Shot 2562 01 23 at 043231

จำโครงสร้าง ภาษา Dart ได้นะ รูปแบบการ import

 Screen Shot 2562 01 23 at 043359

 ต่อไป สร้างเมธอด main เรารู้อยู่แล้วนิ ว่า ภาษา dart จะเริ่มต้นการทำงาน ที่ Method main ก่อน รูปแบบครับ

 Screen Shot 2562 01 23 at 043520

 มาสเตอร์ ประกาศตัวแปร   app สืบทอดจาก MaterialApp()

Screen Shot 2562 01 23 at 043615

 จำ format การประกาศตัวแปรบน ภาษา Dart ได้นะครับ

Screen Shot 2562 01 23 at 043740

 

ใน พารามิเตอร์ ของ MaterialApp จะมี home มาสเตอร์​จะ สร้าง Widget ที่เป็น Text ที่แสดงข้อความ This is Home ครับ

Screen Shot 2562 01 23 at 043817 

 เสร็จแล้ว มาสเตอร์ จะ. runApp โดย Call ออฟเจ็ค app ที่เราสร้างขึ้น

Screen Shot 2562 01 23 at 043834

 กลับมาที่ Termianl ให้ กด Control c  หรือ กด q เพื่อออกจากการรันแอพก่อน 

Screen Shot 2562 01 23 at 043939

แล้ว พิมพ์คำสั่ง flutter run เพื่อ รันแอพใหม่

Screen Shot 2562 01 23 at 044023

รอจน ได้ข้อความแบบนี่ครับ

Screen Shot 2562 01 23 at 044026

ที่ Simulator ของเราจะมี ข้อมความ This is Home ปรากฎแบบนี้ครับ เห็นไหม ? เราสามารถส่ง Widget Text มาแสดงบน Screen โดยผ่าน MaterialApp ด้วยวิธีนี่ครับ แต่ยังไม่สวย ? เดี๋ยวครั้งหน้าเราจะลอง คลาส Scaffold มาทำให้ สวยขึ้นครับ สำหรับใครที่ทำไม่ได้ ลองดูนี่ครับ https://www.androidthai.in.th/private-project-android-flutter-course.html มาสเตอร์ มี คอร์ส สอนFlutter ตัวต่อตัว มาลุยกันครับ