ตอนที่ 2 ทำแอพ Flutter : ติดตั้ง Flutter และแอพ Hello World

1. ความต้องการของระบบ
2. การติดตั้ง Flutter SDK
 2.1. ดาวน์โหลด Flutter SDK
 2.2 แตกไฟล์ SDK
 2.3 เพิ่ม Flutter ใน PATH ของคุณ
 2.4 ตรวจสอบการติดตั้ง
3. การตั้งค่า IDE

Flutter ซึ่งเป็นชุดเครื่องมือ UI แบบโอเพ่นซอร์สของ Google ได้รับความนิยมเพิ่มขึ้นในการรับทำแอพ เนื่องจากความสามารถในการทำแอพข้ามแพลตฟอร์มที่สวยงามและใช้งานได้ด้วยโค้ดเบสเดียว ในการเริ่มต้นการเดินทางของคุณในการทำแอพ Flutter ขั้นตอนแรกคือการตั้งค่าสภาพแวดล้อมการพัฒนาของคุณ ในบทความนี้ เราจะแนะนำคุณเกี่ยวกับขั้นตอนการติดตั้งและตั้งค่า Flutter รวมถึงระบบที่จำเป็น การติดตั้ง Flutter SDK การตั้งค่าสภาพแวดล้อมการทำแอพแบบรวม (IDE) และการทำแอพ Flutter แรกของคุณ

1. ความต้องการของระบบ

ก่อนเข้าสู่ขั้นตอนการติดตั้ง ตรวจสอบให้แน่ใจว่าระบบของคุณตรงตามข้อกำหนดต่อไปนี้:

สำหรับวินโดวส์:

• ระบบปฏิบัติการ: Windows 7 SP1 หรือใหม่กว่า (64 บิต)
• พื้นที่ดิสก์: 1.64 GB (ไม่รวมพื้นที่ดิสก์สำหรับ IDE/เครื่องมือ)
• เครื่องมือ: Windows PowerShell 5.0 หรือใหม่กว่า, Git สำหรับ Windows 2.x

สำหรับ macOS:

• ระบบปฏิบัติการ: macOS 10.14 หรือใหม่กว่า (64 บิต)
• พื้นที่ดิสก์: 2.8 GB (ไม่รวมพื้นที่ดิสก์สำหรับ IDE/เครื่องมือ)
• เครื่องมือ: Bash, Curl, Git 2.x, mkdir, rm, เปิดเครื่องรูด, ซึ่ง, xz-utils

สำหรับลินุกซ์:

• ระบบปฏิบัติการ: Ubuntu 16.04 หรือใหม่กว่า (64 บิต)
• พื้นที่ดิสก์: 2.8 GB (ไม่รวมพื้นที่ดิสก์สำหรับ IDE/เครื่องมือ)
• เครื่องมือ: Bash, Curl, Git 2.x, mkdir, rm, เปิดเครื่องรูด, ซึ่ง, xz-utils

2. การติดตั้ง Flutter SDK

สามารถดูคลิปวีดีโอได้ที่ Flutter คืออะไร และการติดตั้ง โดยขั้นตอนคร่าว ๆ จะเป็นดังนี้

2.1. ดาวน์โหลด Flutter SDK

ดาวน์โหลด Flutter SDK รุ่นล่าสุดสำหรับระบบปฏิบัติการของคุณจากเว็บไซต์อย่างเป็นทางการของ Flutter ( https://flutter.dev/docs/get-started/install )

2.2 แตกไฟล์ SDK

Windows: แตกไฟล์ zip ที่ดาวน์โหลดมาไปยังไดเรกทอรีที่คุณต้องการ (เช่น C:\src\flutter)

macOS/Linux: แตกไฟล์ tar ที่ดาวน์โหลดมาไปยังไดเร็กทอรีที่คุณต้องการ (เช่น ~/development)

2.3 เพิ่ม Flutter ใน PATH ของคุณ

วินโดวส์:

1. เปิดการตั้งค่า “Environment Variables”
2. ภายใต้ “User variables” เลือก “Path” แล้วคลิก “Edit”
3. เพิ่มเส้นทางไปยังโฟลเดอร์ ‘flutter\bin’ ภายในโฟลเดอร์ SDK ที่แยกออกมา (เช่น C:\src\flutter\bin)

แมคโอเอส/ลินุกซ์:

1. เปิดเทอร์มินัล
2. เรียกใช้คำสั่งต่อไปนี้ แทนที่ “/path/to/flutter” ด้วยเส้นทางจริงไปยังโฟลเดอร์ ‘flutter’ ภายในโฟลเดอร์ SDK ที่แยกออกมา:

echo 'export PATH="$PATH:/path/to/flutter/bin"' >> ~/.bashrc

3. เรียกใช้source ~/.bashrcเพื่อใช้การเปลี่ยนแปลง

2.4 ตรวจสอบการติดตั้ง

เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัลหรือพรอมต์คำสั่งเพื่อให้แน่ใจว่า Flutter ได้รับการติดตั้งอย่างถูกต้อง:

flutter doctor

คำสั่งนี้จะตรวจสอบสภาพแวดล้อมของคุณและแสดงรายงานสถานะการติดตั้ง Flutter ของคุณ ทำตามคำแนะนำเพื่อแก้ไขปัญหาใดๆ

3. การตั้งค่า IDE

แม้ว่า Flutter จะรองรับ IDE ที่หลากหลาย แต่ Android Studio และ Visual Studio Code ก็เป็นตัวเลือกยอดนิยม เราจะอธิบายขั้นตอนการตั้งค่าสำหรับทั้งสองอย่าง

a) Android Studio

1. ดาวน์โหลดและติดตั้ง Android Studio จากเว็บไซต์ทางการ ( https://developer.android.com/studio )
2. เปิด Android Studio และไปที่ “Configure” > “Plugins”
3. ในแท็บ “Marketplace” ค้นหา “Flutter” และติดตั้งปลั๊กอิน
4. รีสตาร์ท Android Studio เพื่อใช้การเปลี่ยนแปลง

ดูข้อมูลเพิ่มเติมได้ที่ Android Studio คืออะไร และการติดตั้ง

b) Visual Studio Code

1. ดาวน์โหลดและติดตั้ง Visual Studio Code จากเว็บไซต์ทางการ ( https://code.visualstudio.com/ )
2. เปิด Visual Studio Code และไปที่มุมมอง “Extensions”
3. ค้นหา “Flutter” และติดตั้งส่วนขยาย
4. สร้างโครงการ Flutter แรกของคุณ

ดูข้อมูลเพิ่มเติมได้ที่ Visual Studio Code คืออะไร และการติดตั้ง

a) Android Studio

1. เปิด Android Studio แล้วคลิก “Start a new Flutter project”
2. เลือก “Flutter Application” แล้วคลิก “Next”
3. ป้อนชื่อโปรเจ็กต์ของคุณ ตั้งค่า PATH Flutter SDK (หากตรวจไม่พบ) และเลือกตำแหน่งโปรเจ็กต์ คลิก “Next”
4. ป้อนชื่อแพ็กเกจสำหรับแอปของคุณ (โดยปกติจะเป็นชื่อโดเมนแบบย้อนกลับ เช่น com.example.myapp) แล้วคลิก “Finish” Android Studio จะสร้างไฟล์โครงการและเปิดโครงการ Flutter ใหม่ของคุณ

b) Visual Studio Code

1. เปิด Visual Studio Code แล้วกด Ctrl+Shift+P(Windows/Linux) หรือ Cmd+Shift+P(macOS) เพื่อเปิดจานคำสั่ง
2. พิมพ์ “Flutter” และเลือก “Flutter: New Project”
3. เลือกโฟลเดอร์สำหรับโครงการของคุณและป้อนชื่อโครงการ Visual Studio Code จะสร้างไฟล์โครงการและเปิดโครงการ Flutter ใหม่ของคุณ
4. เรียกใช้แอพ Flutter แรกของคุณ

ตอนนี้คุณได้สร้างโปรเจกต์ Flutter โปรเจ็กต์แรกแล้ว ก็ถึงเวลาเรียกใช้แอปบนอีมูเลเตอร์หรืออุปกรณ์จริง หรือดูข้อมูลเพิ่มเติมได้ที่ Android AVD คืออะไร และการสร้าง

a) Android Studio

1. เปิด “AVD Manager” (Tools > AVD Manager) และสร้างอุปกรณ์เสมือน Android (AVD) ใหม่ หากคุณยังไม่ได้ทำ
2. เลือก AVD ที่คุณสร้างหรือเชื่อมต่ออุปกรณ์ทางกายภาพที่เปิดใช้งานการดีบัก USB
3. คลิกปุ่ม “Run” (ไอคอนเล่นสีเขียว) ในแถบเครื่องมือ Android Studio จะสร้างและเปิดใช้แอปของคุณบนอุปกรณ์ที่เลือก

b) Visual Studio Code

1. เปิดเทอร์มินัลภายใน Visual Studio Code โดยคลิก “Terminal” > “New Terminal”
2. หากคุณมีโปรแกรมจำลอง Android หรืออุปกรณ์ทางกายภาพที่เปิดใช้งานการดีบัก USB ให้รันคำสั่งต่อไปนี้:

flutter run

คุณได้ติดตั้งและตั้งค่า Flutter SDK ซึ่งเป็น IDE และการพัฒนาแอพด้วย Flutter แรกของคุณเรียบร้อยแล้ว ด้วยพื้นฐานนี้ คุณสามารถสำรวจความสามารถของการพัฒนาแอพด้วย Flutter และเริ่มทำแอพข้ามแพลตฟอร์มที่สวยงามได้ ในขณะที่คุณดำเนินการ ให้พิจารณาเจาะลึกลงไปในวิดเจ็ต การออกแบบเลย์เอาต์และ UI ของ Flutter การจัดการสถานะ และหัวข้อสำคัญอื่นๆ เพื่อฝึกฝนศิลปะการพัฒนาแอพด้วย Flutter

พัฒนาแอพด้วย Flutter

ตอนที่ 1 ทำแอพ Flutter : โครงสร้างการทำงาน (Architecture)

ตอนที่ 3 ทำแอพ Flutter : วิดเจ็ต (Widgets)