Flutter และ Dart: การติดตั้งและโปรเจกต์แรก

มาทำความรู้จักว่า Flutter และ Dart คืออะไร ติดตั้งเครื่องมือ สร้างโปรเจกต์แรกของคุณ และสัมผัสความมหัศจรรย์ของ hot reload

8 นาที · 3 คำถาม

Flutter คือ เฟรมเวิร์ก: กล่องเครื่องมือขนาดใหญ่ที่บรรจุโค้ดสำเร็จรูปพร้อมใช้งาน สร้างโดย Google เพื่อสร้าง แอปพลิเคชันมือถือ หรือก็คือโปรแกรมที่คุณติดตั้งลงบนโทรศัพท์ จุดแข็งที่สุดของมันคือ คุณเขียนโค้ด เพียงครั้งเดียว แล้วมันก็ทำงานได้บน iPhone, Android, เว็บ และแม้กระทั่งเดสก์ท็อป โค้ดนั้นเขียนด้วย Dart ซึ่งเป็น ภาษาโปรแกรม: ชุดของคำและกฎที่ให้คุณสั่งงานเครื่องได้ ในการติดตั้ง Flutter ให้ทำตามคู่มืออย่างเป็นทางการที่ docs.flutter.dev (ในหัวข้อ Get started) ที่นั่นคุณจะดาวน์โหลด SDK (Software Development Kit หรือชุดเครื่องมือที่บรรจุเครื่องมือทั้งหมด) และติดตั้งโปรแกรมแก้ไขโค้ด เช่น Visual Studio Code พร้อมส่วนขยาย Flutter ของมัน จากนั้นคุณตรวจสอบทุกอย่างใน เทอร์มินัล: หน้าต่างที่คุณพิมพ์คำสั่งข้อความเพื่อควบคุมคอมพิวเตอร์

flutter doctor

คำสั่ง flutter doctor ทำงานเหมือนหมอ: มันตรวจสอบเครื่องของคุณและแสดงรายการตรวจเช็ก โดยมีเครื่องหมายถูกสีเขียวสำหรับสิ่งที่พร้อมแล้ว และกากบาทสำหรับสิ่งที่ยังขาด พร้อมคำแนะนำในการแก้ไข เมื่อสิ่งจำเป็นทั้งหลายกลายเป็นสีเขียว คุณก็สามารถสร้าง โปรเจกต์ แรกได้: โฟลเดอร์ที่จะบรรจุโค้ดทั้งหมดของแอปคุณ ชื่อโปรเจกต์ Flutter เขียนด้วยตัวพิมพ์เล็ก ไม่มีช่องว่างหรือเครื่องหมายกำกับเสียง และใช้ขีดล่าง (_) เพื่อคั่นคำ

flutter create my_first_app
cd my_first_app
flutter run

flutter create สร้างโฟลเดอร์ my_first_app ที่บรรจุแอปตัวอย่างครบชุด cd (change directory หรือเปลี่ยนไดเรกทอรี) จะย้ายเข้าไปในโฟลเดอร์นั้น ส่วน flutter run จะคอมไพล์แล้วรันแอปบนโทรศัพท์ที่เชื่อมต่อผ่าน USB บน อีมูเลเตอร์ (โทรศัพท์เสมือนที่แสดงบนหน้าจอของคุณ) หรือในเบราว์เซอร์ Chrome โค้ดทั้งหมดที่คุณเขียนจะอยู่ในไฟล์ lib/main.dart แทนที่เนื้อหาของมันด้วยโปรแกรมขั้นต่ำนี้:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const Scaffold(
        body: Center(
          child: Text("Hello Flutter!"),
        ),
      ),
    );
  }
}

มาอ่านภาพรวมกันคร่าว ๆ โดยยังไม่ต้องพยายามเข้าใจทุกอย่าง: import โหลดกล่องเครื่องมือกราฟิกของ Flutter, void main() คือ จุดเริ่มต้นการทำงาน (entry point) (ฟังก์ชันแรกสุดที่ทำงาน) และ runApp เริ่มต้นแอปด้วยการแสดงข้อความ "Hello Flutter!" ตรงกลางหน้าจอ แต่ละส่วนจะถูกอธิบายอย่างละเอียดในบทเรียนถัด ๆ ไป ทีนี้มาถึงความมหัศจรรย์ของ hot reload: เปลี่ยนข้อความในข้อความนั้น บันทึกไฟล์... แล้วแอปที่แสดงอยู่จะอัปเดต ทันที โดยไม่ต้องเริ่มใหม่ วงจรที่สั้นมาก ๆ นี้คือหนึ่งในจุดแข็งที่ยิ่งใหญ่ของ Flutter

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. Flutter คืออะไร?
   • ภาษาโปรแกรมที่สร้างโดย Apple
   • เฟรมเวิร์กของ Google สำหรับสร้างแอปพลิเคชัน
   • เครื่องมือแก้ไขรูปภาพสำหรับมือถือ
2. คำสั่งใดใช้สร้างโปรเจกต์ Flutter ใหม่?
   • flutter run my_app
   • flutter doctor my_app
   • flutter create my_app
3. hot reload ทำอะไร?
   • มันอัปเดต Flutter เป็นเวอร์ชันล่าสุด
   • มันนำการเปลี่ยนแปลงโค้ดของคุณไปใช้กับแอปที่กำลังทำงานอยู่แทบจะทันที
   • มันเริ่มโทรศัพท์ใหม่เพื่อล้างหน่วยความจำ