เริ่มต้น Flutter ด้วยการสร้าง Hello World App แบบ Step by Step ละเอียดยิบ

เริ่มต้น Flutter ด้วยการสร้าง Hello World App แบบ Step by Step ละเอียดยิบ

หลังจากติดตั้งเครื่องมือต่างๆสำหรับการพัฒนาแอปฯด้วย Flutter และ Dart ไปแล้วนั้น หากใครยังไม่ได้ติดตั้ง สามารถดูวิธีการได้จาก “เรียนรู้วิธีการติดตั้ง Flutter บน Windows แบบ Step by Step“

ธรรมเนียมปฏิบัติของเหล่า Developer ในการเริ่มต้นการเขียนโปรแกรมภาษาสักภาษาหนึ่งคือการเขียนโปรแกรมเพื่อให้แสดงวลี “Hello World” ดังนั้นเพื่อมิให้เป็นการขัดต่อธรรมเนียมปฏิบัติอันสืบทอดกันมาอย่างยาวนานนี้ เราจึงเริ่มต้นพัฒนา Mobile Application แรกด้วย Flutter และ Dart โดยการสร้าง Hello World App แบบทีละขั้นตอน จับมือทำกันเลยที่เดียว แต่จะเพิ่มเติมความพิเศษเข้าไปนิดหน่อย คือ เขียนในลักษณะแยก Class เพื่อปูพื้นฐานไปสู่การพัฒนาแอปพลิเคชันที่ซับซ้อนต่อไป และเครื่องมือที่ใช้คือ Android Studio ซึ่งสามารถดูคลิปการสร้าง Hello App ด้วย Flutter Step by Step ได้ที่นี่จ้า

เริ่มต้นกันเลย

  1. เปิดโปรแกรม Android Studio จากนั้นเลือก “Start a new Flutter project”
เปิดโปรแกรม Android Studio จากนั้นเลือก “Start a new Flutter project”
  1. เลือก Flutter Application แล้วกดปุ่ม “Next”
เลือก Flutter Application แล้วกดปุ่ม “Next”
  1. กำหนดค่าต่างๆ ดังนี้

Project name ชื่อ Project โดยชื่อโปรเจคจะต้องตรงตามกฎของภาษา Dart คือ lower_case_with_underscores หมายถึงต้องตั้งชื่อโปรเจคเป็นภาษาอังกฤษตัวพิมพ์เล็กทั้งหมด ห้ามมีเว้นวรรค แต่หากจะเว้นวรรคต้องใช้เครื่องหมาย _ (underscore) แทน เช่น ep1_helloworld

Flutter SDK path ที่อยู่ของโฟลเดอร์ที่เก็บ Flutter SDK

Project location ที่อยู่ของโฟลเดอร์ที่เก็บไฟล์ Project

Description คำอธิบาย หรือรายละเอียดของโปรแกรม (สามารถเปลี่ยนได้ภายหลัง)  

จากนั้นกดปุ่ม “Next”

กำหนดค่า Flutter ต่างๆ
  1. กำหนด Company domain เพื่อเอาไปใช้เป็น package ของโปรเจค หากต้องการตั้งค่า package เอง สามารถกดปุ่ม edit จากนั้นแนวนำว่าให้เลือกติ๊กทุกอย่าง โดยเฉพาะ AndroidX เพื่อให้โปรเจครองรับ AndroidX, Kotline และ Swift จากนั้นกดปุ่ม “Finish”
กำหนด Company domain เพื่อเอาไปใช้เป็น package ของโปรเจค หากต้องการตั้งค่า package เอง สามารถกดปุ่ม edit จากนั้นแนวนำว่าให้เลือกติ๊กทุกอย่าง โดยเฉพาะ AndroidX เพื่อให้โปรเจครองรับ AndroidX, Kotline และ Swift จากนั้นกดปุ่ม “Finish”
  1. หลังจากตั้งค่าการสร้างโปรเจคจากขั้นตอนที่แล้ว จะเห็นหน้าจอ Android Studio ดังรูป จากนั้นคลิกขวาที่โฟลเดอร์ lib แล้วเลือก “New > Package“ เพื่อสร้างโฟลเดอร์ และจัดเก็บไฟล์โค้ดภาษา Dart ให้เป็นหมวดหมู่ โดยโฟลเดอร์ lib คือโฟลเดอร์ที่เก็บไฟล์ภาษา Dart สำหรับแอปพลิเคชัน Hello World
หลังจากตั้งค่าการสร้างโปรเจคจากขั้นตอนที่แล้ว จะเห็นหน้าจอ Android Studio ดังรูป จากนั้นคลิกขวาที่โฟลเดอร์ lib แล้วเลือก “New > Package“ เพื่อสร้างโฟลเดอร์ และจัดเก็บไฟล์โค้ดภาษา Dart ให้เป็นหมวดหมู่ โดยโฟลเดอร์ lib คือโฟลเดอร์ที่เก็บไฟล์ภาษา Dart สำหรับแอปพลิเคชัน Hello World
  1. สร้างชื่อโฟลเดอร์ชื่ “views” เพื่อเก็บไฟล์ภาษา Dart สำหร้บสร้างหน้าจอ จากนั้นกดปุ่ม “OK” ดังรูป
สร้างชื่อโฟลเดอร์ชื่ “views” เพื่อเก็บไฟล์ภาษา Dart สำหร้บสร้างหน้าจอ จากนั้น
  1. หลังจากสร้างโฟลเดอร์ “views” แล้ว คลิกเมาส์ปุ่มขวาที่โฟลเดอร์นี้ แล้วคลิกเมนู “New > Dart File” เพื่อสร้างไฟล์ภาษา Dart สำหรับสร้างหน้าจอของแอปพลเคชัน (ภาษา Dart ไม่ได้สร้างได้แค่หน้าจอนะจ๊ะ แต่ใช้เขียนส่วนประมวลผลด้วย โดยหน้าจอจะใช้ Flutter Framework ส่วนการประมวลผลต่างๆจะใช้ภาษา Dart แต่ทั้งคู่จะเป็นไฟล์นามสกุล .dart เหมือนกัน)
หลังจากสร้างโฟลเดอร์ “views” แล้ว คลิกเมาส์ปุ่มขวาที่โฟลเดอร์นี้ แล้วคลิกเมนู “New > Dart File” เพื่อสร้างไฟล์ภาษา Dart สำหรับสร้างหน้าจอของแอปพลเคชัน (ภาษา Dart ไม่ได้สร้างได้แค่หน้าจอนะจ๊ะ แต่ใช้เขียนส่วนประมวลผลด้วย โดยหน้าจอจะใช้ Flutter Framework ส่วนการประมวลผลต่างๆจะใช้ภาษา Dart แต่ทั้งคู่จะเป็นไฟล์นามสกุล .dart เหมือนกัน)
  1. กำหนดชื่อไฟล์ “hello_ui” โดยไม่ต้องใส่นามสกุลไฟล์ จากนั้นกดปุ่ม “OK”
กำหนดชื่อไฟล์ “hello_ui” โดยไม่ต้องใส่นามสกุลไฟล์ จากนั้นกดปุ่ม “OK”
  1. หลังจากสร้างไฟล์ hello_ui แล้ว จะเห็นพื้นที่สำหรับเขียนโปรแกรมอยู่ฝั่งขวามือ ดังรูป
หลังจากสร้างไฟล์ hello_ui แล้ว จะเห็นพื้นที่สำหรับเขียนโปรแกรมอยู่ฝั่งขวามือ
  1. พิมพ์คำสั่ง “import” โดยสามารถพิมพ์เป็นบางตัวอักษร เช่น “impo” โปรแกรม Android Studio จะแสดง Suggestion Code ขึ้นมาให้เลย เราสามารถลูกศรลงเพื่อเลือกคำสั่งที่ต้องการ จากนั้นกดปุ่ม Tab หรือ Enter ได้ทันทีจ้า จากรูปมี import ‘’ มาให้คำสั่งเดียว เราก็กด Tab หรือ Enter ได้เลยจ้า
พิมพ์คำสั่ง “import” โดยสามารถพิมพ์เป็นบางตัวอักษร เช่น “impo” โปรแกรม Android Studio จะแสดง Suggestion Code ขึ้นมาให้เลย เราสามารถลูกศรลงเพื่อเลือกคำสั่งที่ต้องการ จากนั้นกดปุ่ม Tab หรือ Enter ได้ทันทีจ้า จากรูปมี import ‘’ มาให้คำสั่งเดียว เราก็กด Tab หรือ Enter ได้เลยจ้า
  1. แนวคิดเดียวกัน พิมพ์เป็นบางตัว ในที่นี้พิมพ์ “ma” จากนั้นเลือก “package:flutter/material.dart” เลยครับผม

Import ‘package:flutter/material.dart’; คือการเรียกใช้งาน material library ซึ่งหากต้องการให้แอปพลิเคชันมีการแสดงผลในลักษณะ Material Design จำเป็นต้องเรียกใช้ package หรือ material library นี้ โดยโปรเจค Hello World ของเราก็ใช้ Material Design จ้า

Import ‘package:flutter/material.dart’;
  1. หลังจาก import Material Library แล้ว เราก็เริ่มสร้าง Class กันได้เลย โดยภาษา Dart ก็เป็นภาษาที่ใช้แนวคิดเชิงวัตถุ คล้ายๆภาษา JAVA หรือ C# ที่จะใช้วิธีการสร้าง Class ในการพัฒนาโปรแกรม ซึ่งโปรเจคของเราจะสร้าง Class ประเภทหนึ่ง เรียกว่า Stateless โดยพิมพ์แค่ “stl” ก็จะมี Suggestion Code ให้เลือกเลย ดังรูป
หลังจาก import Material Library แล้ว เราก็เริ่มสร้าง Class กันได้เลย โดยภาษา Dart ก็เป็นภาษาที่ใช้แนวคิดเชิงวัตถุ คล้ายๆภาษา JAVA หรือ C# ที่จะใช้วิธีการสร้าง Class ในการพัฒนาโปรแกรม ซึ่งโปรเจคของเราจะสร้าง Class ประเภทหนึ่ง เรียกว่า Stateless โดยพิมพ์แค่ “stl” ก็จะมี Suggestion Code ให้เลือกเลย
  1. จากนั้นเราจะเห็น Template Code ของ Class แบบ Stateless ซึ่งเราก็พิมพ์ชื่อ Class โดยในที่นี้พิมพ์ชื่อ Class เป็น “HelloUI” สังเกตว่าจะมีขอบสีแดง ให้เรากดปุ่ม Esc เพื่อออกจากโหมดการแก้ไขจ้า

Stateless คือ Widget ที่ควบคุมหน้าจอประเภทหนึ่ง โดยจะมี 2 ประเภท คือ Stateless และ Stateful ซึ่ง

  • Stateless เหมาะสำหรับหน้าจอที่แสดงผลข้อมูลที่ไม่มีการเปลี่ยนแปลงในขณะแอปพลิเคชันกำลังทำงานอยู่ เช่น แสดงข้อความคำอธิบายเท่านั้น
  • Stateful เหมาะสำหรับหน้าจอที่มีการเปลี่ยนแปลงได้ตลอดเวลาในขณะที่แอปพลิเคชันกำลังทำงานอยู่ เช่น กดปุ่มนี้แล้ว ตัวเลขในหน้าจดจะเปลี่ยนไปเรื่อยๆ เป็นต้น

ในที่นี้โปรเจคของเราแสดงแค่คำว่า “HELLO WORLD” เท่านั้น ไม่มีการเปลี่ยนแปลงใดๆ จึงเลือกใช้ Stateless

ในที่นี้โปรเจคของเราแสดงแค่คำว่า “HELLO WORLD” เท่านั้น ไม่มีการเปลี่ยนแปลงใดๆ จึงเลือกใช้ Stateless
  1. เปลี่ยนคำสั่ง Container() หลัง return เป็น Scaffold โดยสามารถพิมพ์แค่บางตัวอักษร ดังรูป
Scaffold() คือ Widget ที่บรรจุองค์ประกอบ และความสามารถต่างๆตามลักษณะ Material Design เอาไว้

Scaffold() คือ Widget ที่บรรจุองค์ประกอบ และความสามารถต่างๆตามลักษณะ Material Design เอาไว้ เช่น

Property appBar ใช้กำหนด แถบบาร์ด้านบนของหน้าจอ

Property body ใช้กำหนดส่วนการแสดงผลหลัก

Property bottomNavigationBar ใช้กำหนดแถบเมนูด้านล่างของหน้าจอ เป็นต้น

  1. กำหนดแถบบาร์ด้านบนด้วย property appBar ดังรูป
กำหนดแถบบาร์ด้านบนด้วย property appBar
  1. กำหนด Widget AppBar() ให้กับ property appBar ใน Scaffold() โดยสังเกตว่าจะคั่น property แต่ละตัวด้วยเครื่องหมาย “,” (comma) ถึงจะเป็น property ตัวสุดท้ายก็สามารถต่อท้ายด้วย “,” ได้ เช่น
Scaffold(
   appBar: AppBar(),
   body: Center(),
)
กำหนด Widget AppBar() ให้กับ property appBar ใน Scaffold() โดยสังเกตว่าจะคั่น property แต่ละตัวด้วยเครื่องหมาย “,” (comma) ถึงจะเป็น property ตัวสุดท้ายก็สามารถต่อท้ายด้วย “,” ได้
  1. กำหนดข้อความใน AppBar ด้วย property title
กำหนดข้อความใน AppBar ด้วย property title
  1. กำหนด Widget Text() เพื่อใส่ข้อความให้กับ property title โดยจะสังเกตว่าสามารถกำหนด Widget ที่เหมาะสมให้กับ property ใน Scaffold ได้ ซึ่ง Flutter ก็จะใช้ Widget เป็น Class หลักในการสร้างหน้าจอ สามารถประยุกต์ใช้แนวคิดเดียวกันนี้กับเรื่องอื่นๆใน Flutter ได้เลยจ้า
กำหนด Widget Text() เพื่อใส่ข้อความให้กับ property title โดยจะสังเกตว่าสามารถกำหนด Widget ที่เหมาะสมให้กับ property ใน Scaffold ได้ ซึ่ง Flutter ก็จะใช้ Widget เป็น Class หลักในการสร้างหน้าจอ สามารถประยุกต์ใช้แนวคิดเดียวกันนี้กับเรื่องอื่นๆใน Flutter ได้เลยจ้า
  1. ลบ “data” ทิ้ง กดปุ่ม Esc เพื่อให้เส้นกรอบสีแดงหายไป และกำหนดข้อความของเราเอง
ลบ “data” ทิ้ง กดปุ่ม Esc เพื่อให้เส้นกรอบสีแดงหายไป และกำหนดข้อความของเราเอง
  1. ใส่คำว่า Hello โดยข้อมูลที่เป็นตัวอักษร (String) จะครอบด้วยเครื่องหมาย ” (Single Quote)
ใส่คำว่า Hello โดยข้อมูลที่เป็นตัวอักษร (String) จะครอบด้วยเครื่องหมาย ‘’ (Single Quote)
  1. กำหนดส่วนแสดงผลหลักของหน้าจอมือถือด้วย property body โดยในที่นี้กำหนด Widget Center() ให้กับ body เพื่อให้ข้อมูลแสดงอยู่กึ่งกลางหน้าจอ ดังรูป
กำหนดส่วนแสดงผลหลักของหน้าจอมือถือด้วย property body โดยในที่นี้กำหนด Widget Center() ให้กับ body เพื่อให้ข้อมูลแสดงอยู่กึ่งกลางหน้าจอ
  1. กำหนด Widget ที่อยู่ใน Center() ด้วย property child
กำหนด Widget ที่อยู่ใน Center() ด้วย property child
  1. เป้าหมายของแอปฯเราคือ แสดงวลี “HELLO WORLD” ซึ่งเป็นตัวอักษร ให้อยู่กึ่งกลางหน้าจอ เราจึใช้ Widget Text() ดังรูป
เป้าหมายของแอปฯเราคือ แสดงวลี “HELLO WORLD” ซึ่งเป็นตัวอักษร ให้อยู่กึ่งกลางหน้าจอ เราจึใช้ Widget Text()
  1. กำหนดรูปแบบตัวอักษรด้วย property style โดยกำหนด Widget TextStyle() ในที่นี้กำหนดสีตัวอักษรด้วย property color ดังรูป (โปรดสังเกตุเครื่องหมาย “,” ด้วยจ้า)
กำหนดรูปแบบตัวอักษรด้วย property style โดยกำหนด Widget TextStyle() ในที่นี้กำหนดสีตัวอักษรด้วย property color ดังรูป (โปรดสังเกตุเครื่องหมาย “,” ด้วยจ้า)
  1. กำหนดขนาดตัวอักษร และความหนาตัวอักษร ด้วย property fontSize และ fontWeight ตามลำดับ

เท่านี้ ไฟล์ hello_ui.dart ก็เสร็จเรียบร้อยแล้วจ้า

กำหนดขนาดตัวอักษร และความหนาตัวอักษร ด้วย property fontSize และ fontWeight ตามลำดับ
  1. กลับมาที่ไฟล์ main.dart ลบทุกอย่างทิ้ง ไม่ต้องเสียดาย เราจะเขียนใหม่ให้ง่ายกว่าเดิม
กลับมาที่ไฟล์ main.dart ลบทุกอย่างทิ้ง ไม่ต้องเสียดาย เราจะเขียนใหม่ให้ง่ายกว่าเดิม
  1. ทำการ Import ‘package:flutter/material.dart’; เหมือนเดิม จากนั้นสร้าง function (หรือ method) ชื่อว่า main() ดังรูป

ฟังก์ชัน main() คือฟังก์ที่บอกโปรแกรมภาษา Dart ให้รู้ว่าให้เริ่มการทำงานของโปรแกรมที่ฟังก์ชันนี้ หรือที่เรียกว่า “Entry Point” หากไม่มีฟังก์ชัน main() แอปพลิเคชันจะทำงานไม่ได้ (คล้ายภาษา JAVA เลยนะ)

ฟังก์ชัน main() คือฟังก์ที่บอกโปรแกรมภาษา Dart ให้รู้ว่าให้เริ่มการทำงานของโปรแกรมที่ฟังก์ชันนี้ หรือที่เรียกว่า "Entry Point" หากไม่มีฟังก์ชัน main() แอปพลิเคชันจะทำงานไม่ได้ (คล้ายภาษา JAVA เลยนะ)
  1. เรียกใช้งาน function
runApp(
   MaterialApp(),
)

ดังรูป

runApp() เป็นฟังก์ชันที่มีหน้าที่แนบหรือใส่ Widget (ที่ระบุไว้ในฟังก์ชัน runApp) เข้าไปในหน้าจอ โดย widget ดังกล่าวนี้จะถูกกำหนดให้เป็น Root ใน Widget Tree (อย่าเพิ่งงงครับผม เบื้องต้น แค่เข้าใจว่า runApp() ทำหน้าที่ใส่ Widget เข้าไปในหน้าจอก็พอครับ)

MaterialApp() คือ Widget ที่ใช้ในการกำหนดการแสดงผลของหน้าจอให้เป็นแบบ Material Design ซึ่งหากต้องการให้โมบายแอปพลิเคชันมีรูปแบบเป็น Material Deisgn ก็ควรใช้ Widget นี้ครับผม และจะต้องมีการกำหนด Widget ให้กับ Property home เสมอ เพื่อกำหนดส่วนต่างๆของหน้าจอ ซึ่งเปรียบเสมือนการกำหนดโครงสร้างการแสดงผลของหน้าจอนั่นเอง หากเปรียบกับการสร้างบ้าน เราวางแผนไว้แล้วว่าจะสร้างบ้านให้มีแบบบ้านเป็น Material Design จากนั้นเราก็ต้องสร้างบ้านให้มีโครงสร้างตามลักษณะ  Material Design เช่น ให้มีหลังคาแบบนี้ หน้าต่างแบบนั้น พื้นบ้านแบบโน้น เป็นต้น

runApp() เป็นฟังก์ชันที่มีหน้าที่แนบหรือใส่ Widget (ที่ระบุไว้ในฟังก์ชัน runApp) เข้าไปในหน้าจอ โดย widget ดังกล่าวนี้จะถูกกำหนดให้เป็น Root ใน Widget Tree
  1. กำหนดหน้าจอ HelloUI ที่เราสร้างเอาไว้แล้วให้กับ MaterialApp() ด้วย property home เพื่อกำหนดว่าจะให้หน้าจอแสดง Widget ไหนขึ้นมาเป็นหน้าจอแรก
กำหนดหน้าจอ HelloUI ที่เราสร้างเอาไว้แล้วให้กับ MaterialApp() ด้วย property home เพื่อกำหนดว่าจะให้หน้าจอแสดง Widget ไหนขึ้นมาเป็นหน้าจอแรก
  1. หลังจากเรียกใช้ HelloUI() แล้ว สังเกตว่า Android Studio จะ import ‘package:ep1_helloworld/views/hello_ui.dart’; ให้โดยอัตโนมัติ ซึ่งเราสามารถเขียนเพื่อ import เองได้ด้วยจ้า เท่านี้ main.dart และ hello_ui.dart ด็เสร็จเรียบร้อยแล้ว ต่อไปจะทดลองรันโปรแกรมกันดูได้เลย
หลังจากเรียกใช้ HelloUI() แล้ว สังเกตว่า Android Studio จะ import ‘package:ep1_helloworld/views/hello_ui.dart’; ให้โดยอัตโนมัติ ซึ่งเราสามารถเขียนเพื่อ import เองได้ด้วยจ้า เท่านี้ main.dart และ hello_ui.dart ด็เสร็จเรียบร้อยแล้ว
  1. กดปุ่ม “AVD Manager” ดังรูป
กดปุ่ม “AVD Manager” ดังรูป
  1. กดปุ่ม “Run” ที่ AVD ที่เราสร้างไว้ หากยังไม่สร้าง สามารถกลับไปดูได้ที่นี่
กดปุ่ม “Run” ที่ AVD ที่เราสร้างไว้
  1. หลังจาก AVD เปิดขึ้นมาแล้ว สามารถปิดหน้าต่าง AVD ไปก่อนได้
หลังจาก AVD เปิดขึ้นมาแล้ว สามารถปิดหน้าต่าง AVD ไปก่อนได้
  1. กดปุ่ม “Run” ที่ Android Studio
กดปุ่ม “Run” ที่ Android Studio
  1. จากนั้น กรุณารอให้การ Run เสร็จเรียบร้อยจ้า
กรุณารอให้การ Run เสร็จเรียบร้อย
  1. เมื่อ Run เสร็จแล้ว จะเห็นข้อความ ประมาณ

Launching lib\main.dart on Android SDK built for x86 in debug mode…

Running Gradle task ‘assembleDebug’…

√ Built build\app\outputs\apk\debug\app-debug.apk.

Installing build\app\outputs\apk\app.apk…

Syncing files to device Android SDK built for x86…

และ ผลการรันในมืถือ AVD คือแสดงวลี “HELLO WORLD” ดังรูป

ผลการรันแอปฯในมืถือ AVD คือแสดงวลี “HELLO WORLD”

เท่านี้ การพัฒนาแอปปพลิเคชัน Hello World ก็เสร็จเรียบร้อยจ้า อาจจะดูหลายขั้นตอน แต่เรา adt101.com ต้องการให้ผู้ที่เริ่มต้นสามารถเข้าใจได้มากที่สุดครับผม

สรุปชุดคำสั่ง หรือโค้ด มีดังนี้

main.dart

import 'package:ep1_helloworld/views/hello_ui.dart';
import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      home: HelloUI(),
    ),
  );
}

hello_ui.dart

import 'package:flutter/material.dart';

class HelloUI extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text(

          'Hello'

        ),

      ),

      body: Center(

        child: Text(

          'HELLO WORLD',

          style: TextStyle(

            color: Colors.blueAccent,

            fontSize: 25.0,

            fontWeight: FontWeight.bold,

          ),

        ),

      ),

    );

  }

}

อธิบายอีกครั้งครับผม

import package:flutter/material.dart คือการเรียกใช้งาน material library ซึ่งหากต้องการให้แอปพลิเคชันมีการแสดงผลในลักษณะ Material Design จำเป็นต้องเรียกใช้ package หรือ material library นี้

ฟังก์ชัน main() คือฟังก์ที่บอกโปรแกรมภาษา Dart ให้รู้ว่าให้เริ่มการทำงานของโปรแกรมที่ฟังก์ชันนี้ หรือที่เรียกว่า “Entry Point” หากไม่มีฟังก์ชัน main() แอปพลิเคชันจะทำงานไม่ได้

runApp() เป็นฟังก์ชันที่มีหน้าที่แนบหรือใส่ Widget (ที่ระบุไว้ในฟังก์ชัน runApp) เข้าไปในหน้าจอ โดย widget ดังกล่าวนี้จะถูกกำหนดให้เป็น Root ใน Widget Tree (อย่าเพิ่งงงครับผม เบื้องต้น แค่เข้าใจว่า runApp() ทำหน้าที่ใส่ Widget เข้าไปในหน้าจอก็พอครับ)

MaterialApp() คือ Widget ที่ใช้ในการกำหนดการแสดงผลของหน้าจอให้เป็นแบบ Material Design ซึ่งหากต้องการให้โมบายแอปพลิเคชันมีรูปแบบเป็น Material Deisgn ก็ควรใช้ Widget นี้ครับผม และจะต้องมีการกำหนด Widget ให้กับ Property home เสมอ เพื่อกำหนดส่วนต่างๆของหน้าจอ ซึ่งเปรียบเสมือนการกำหนดโครงสร้างการแสดงผลของหน้าจอนั่นเอง หากเปรียบกับการสร้างบ้าน เราวางแผนไว้แล้วว่าจะสร้างบ้านให้มีแบบบ้านเป็น Material Design จากนั้นเราก็ต้องสร้างบ้านให้มีโครงสร้างตามลักษณะ  Material Design เช่น ให้มีหลังคาแบบนี้ หน้าต่างแบบนั้น พื้นบ้านแบบโน้น เป็นต้น

Scaffold() คือ Widget บรรจุโครงสร้างตามลักษณะ Material Design เอาไว้ เช่น

Property appBar ใช้กำหนด แถบบาร์ด้านบนของหน้าจอ

Property body ใช้กำหนดส่วนการแสดงผลหลัก

Property bottomNavigationBar ใช้กำหนดแถบเมนูด้านล่างของหน้าจอ เป็นต้น

สามารถดูรายละเอียดเกี่ยวกับ Flutter Material Components Widgets ได้ที่นี่ครับผม

ทางเราหวังว่าทุกๆท่านจะได้รับประโยชน์จากบทความนี้ และสามารถเริ่มต้นพัฒนาโมบายแอปพลิเคชันบนโทรศัพท์มือถือด้วย Flutter และ Dart ด้วยความเข้าใจและมั่นใจครับผม

Leave a Reply

Your email address will not be published. Required fields are marked *