Flutter — แนวคิดหลัก สถาปัตยกรรม และวิดเจ็ต

Flutter คืออะไร

Flutter คือ SDK (ชุดเครื่องมือพัฒนาซอฟต์แวร์) และเฟรมเวิร์กสำหรับสร้างอินเทอร์เฟซผู้ใช้ ประกาศโดย Google ในปี 2015 เวอร์ชันเสถียรแรก Flutter 1.0 เปิดตัวในเดือนธันวาคม 2018 ต่างจาก React Native ตรงที่ Flutter ไม่ใช้สะพานระหว่าง JavaScript และโค้ดเนทีฟ — มันคอมไพล์เป็นคำสั่งเนทีฟของโปรเซสเซอร์โดยตรง

คุณสมบัติหลักของ Flutter คือเอนจินเรนเดอร์ของตัวเอง เฟรมเวิร์กไม่พึ่งพา UIKit (iOS) หรือระบบ View ของ Android แต่ Flutter วาดทุกพิกเซลอย่างอิสระผ่าน Skia (ก่อนปี 2024) หรือเอนจิน Impeller ใหม่ ซึ่งรับประกันความสอดคล้องของรูปลักษณ์บนทุกแพลตฟอร์มและขจัดปัญหาการปรับตัวระหว่างเวอร์ชันระบบปฏิบัติการต่างๆ

ตาม Statista 2024 Flutter อยู่ในอันดับหนึ่งในบรรดาเฟรมเวิร์กข้ามแพลตฟอร์มในด้านความนิยม: ประมาณ 46% ของนักพัฒนาใช้สำหรับการพัฒนาแอปมือถือ เฟรมเวิร์กนี้ใช้ในโปรเจกต์ของ Google Pay, Alibaba, eBay, BMW และ Tencent

ประวัติและเวอร์ชันของ Flutter

เวอร์ชันอัลฟ่าแรกของ Flutter ถูกนำเสนอที่ Dart Developer Summit ในปี 2015 ภายใต้ชื่อ Sky ในปี 2018 Flutter 1.0 เปิดตัวพร้อมรองรับเฉพาะ iOS และ Android Flutter 2.0 (2021) เพิ่มการรองรับ Web และ Desktop Flutter 3.0 (2022) นำเสนอการรองรับที่เสถียรสำหรับ macOS และ Linux Flutter 3.16 (2023) เปิดตัว Impeller — เอนจินเรนเดอร์ใหม่ที่ใช้ Metal และ Vulkan

Flutter 3.22 (2024) รวม Impeller เป็นค่าเริ่มต้นบน iOS, การรองรับ Material Design 3 ที่ดีขึ้น, Dart 3.4 พร้อมส่วนขยายมาโคร, และการรองรับ Native Assets ในตัวสำหรับการเข้าถึงทรัพยากรแพลตฟอร์มโดยตรง Google รายงานว่า Impeller ลดการกระตุกของเฟรมลง 90% เมื่อเทียบกับ Skia

ภาษา Dart

Dart เป็นภาษาการเขียนโปรแกรมที่สร้างโดย Google ในปี 2011 และใช้ใน Flutter Dart รวมการพิมพ์แบบเข้มงวดเข้ากับความสามารถในการคอมไพล์ JIT (สำหรับ Hot Reload) และการคอมไพล์ AOT (สำหรับบิลด์สำหรับผลิต) Dart 3.0 (2023) นำเสนอ pattern matching, sealed class และ records เป็นฟีเจอร์ที่เสถียร

Null safety ใน Dart เป็นฟีเจอร์บังคับที่นำมาตั้งแต่เวอร์ชัน 2.12 คอมไพเลอร์ตรวจสอบประเภทที่สามารถเป็น null ได้ทั้งหมดในเวลาบิลด์ กำจัด NullPointerException ในรันไทม์ ประเภทข้อมูล (int, String, bool) เป็น non-nullable โดยค่าเริ่มต้น และค่าที่เป็น null ใช้คำต่อท้าย ? (เช่น String? name)

สถาปัตยกรรมของ Flutter

สถาปัตยกรรมของ Flutter สร้างขึ้นบนหลักการสามชั้น ชั้นล่างคือเอนจิน (C/C++) รับผิดชอบการเรนเดอร์ I/O และการเข้าถึง API ของแพลตฟอร์ม ชั้นกลางคือเฟรมเวิร์ก (Dart) ซึ่งใช้ระบบวิดเจ็ต ท่าทาง แอนิเมชัน และการนำทาง ชั้นบนสุดคือแอปพลิเคชัน (Dart) ซึ่งประกอบวิดเจ็ตเป็นแผนผัง

วิดเจ็ตและแผนผังวิดเจ็ต

ใน Flutter ทุกอย่างคือวิดเจ็ต วิดเจ็ตมีสองประเภท: StatelessWidget (ไม่เปลี่ยนรูป ไม่เก็บสถานะ) และ StatefulWidget (เปลี่ยนรูปได้ จัดการสถานะผ่าน State) แผนผังวิดเจ็ต (Widget Tree) คือโครงสร้างแบบลำดับชั้นที่วิดเจ็ตลูกแต่ละตัวซ้อนอยู่ภายในวิดเจ็ตแม่ Scaffold, AppBar, Container, Text, Column, Row — สิ่งเหล่านี้คือบล็อกพื้นฐาน

BuildContext คือออบเจ็กต์ที่บอกตำแหน่งของวิดเจ็ตในแผนผัง MediaQuery.of(context) รับขนาดหน้าจอ Theme.of(context) รับธีมปัจจุบัน BuildContext ใช้สำหรับการนำทาง (Navigator.of(context)), การเข้าถึง InheritedWidget และการแปลภาษาผ่าน Localizations.of

เอนจิน Impeller

Impeller คือเอนจินเรนเดอร์สมัยใหม่ของ Flutter เขียนด้วยภาษา C++ และใช้ Metal (iOS/macOS) และ Vulkan (Android) ต่างจาก Skia ที่วาดแต่ละเฟรมใหม่ตั้งแต่ต้น Impeller คอมไพล์เชเดอร์ล่วงหน้าและเก็บไว้ในแคช ซึ่งช่วยกำจัดความล่าช้าระหว่างการเรนเดอร์ครั้งแรกของฉากที่ซับซ้อนและลดภาระของ GPU

การทดสอบของ ทีม Google Flutter แสดงให้เห็นว่า Impeller ลดเวลาในการคอมไพล์เชเดอร์จาก 200–500 มิลลิวินาที (Skia) เหลือ 1–3 มิลลิวินาที บน iPhone 13 Pro การเรนเดอร์แบบอิมพัลส์ของ Impeller ทำได้ 120 FPS โดยไม่มีการตกเฟรม บน Android ที่มี Vulkan ให้ 60 FPS ที่เสถียรแม้บนอุปกรณ์ระดับกลาง (Xiaomi Redmi Note 12)

ตัวอย่างแอปพลิเคชัน Flutter

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('แอป Flutter')),
        body: const Center(
          child: Text('สวัสดี, Flutter!'),
        ),
      ),
    );
  }
}

ข้อดีของ Flutter

ฐานโค้ดเดียว — ข้อดีหลักของ Flutter โปรเจกต์ Dart เดียวคอมไพล์สำหรับ iOS, Android, Web, Windows, macOS และ Linux ตามข้อมูลของ Google ซึ่งช่วยลดเวลาในการพัฒนา 30–50% เมื่อเทียบกับโปรเจกต์ iOS และ Android ที่แยกจากกัน Alibaba ลดเวลาในการปล่อยเวอร์ชันลง 30% หลังจากย้ายมาใช้ Flutter

ประสิทธิภาพ ของ Flutter ใกล้เคียงกับเนทีฟ การคอมไพล์ AOT ของ Dart เป็นโค้ดเครื่อง ARM และ x86_64 ช่วยขจัดความล่าช้าในการแปลความ เอนจิน Impeller รับประกัน 60 FPS แม้บนอุปกรณ์ปี 2018 (iPhone XR, Samsung Galaxy S9) ตามข้อมูลของ Google 99.5% ของเฟรมในแอปพลิเคชัน Flutter ถูกเรนเดอร์โดยไม่มีการกระตุก

Hot Reload — เทคโนโลยีอัปเดตโค้ดทันที นักพัฒนาเปลี่ยนแปลงโค้ดต้นฉบับ บันทึกไฟล์ และ Flutter สร้างแผนผังวิดเจ็ตใหม่ใน 300–800 มิลลิวินาทีโดยไม่สูญเสียสถานะปัจจุบันของแอปพลิเคชัน ซึ่งช่วยเร่งขั้นตอนการออกแบบ UI: สามารถเปลี่ยนแปลงระยะขอบ สี และแอนิเมชันได้ในไม่กี่วินาทีโดยไม่ต้องรอการสร้างใหม่ทั้งหมด

Material Design 3 และภาษาการออกแบบดั้งเดิม Cupertino (สไตล์ iOS) รวมอยู่ในแพ็คเกจมาตรฐานของ Flutter วิดเจ็ต Material 3 รองรับสีไดนามิก (Material You), เค้าโครงที่ตอบสนอง และแอนิเมชันการเปลี่ยนหน้าจอ CupertinoPageTransition และ CupertinoNavigationBar เลียนแบบพฤติกรรมของตัวนำทาง iOS ดั้งเดิม

การปรับแต่ง วิดเจ็ตไม่จำเป็นต้องสร้าง View ที่กำหนดเองบนแต่ละแพลตฟอร์ม เพียงแค่แทนที่ build() และส่งคืนวิดเจ็ตใหม่ แพ็คเกจแอนิเมชัน (AnimatedContainer, Hero, TweenAnimationBuilder) และแพ็คเกจท่าทาง (GestureDetector, Dismissible) ครอบคลุม 95% ของสถานการณ์แอนิเมชัน UI โดยไม่ต้องเขียนโค้ดแพลตฟอร์ม

ระบบนิเวศและแพ็คเกจของ Flutter

pub.dev คือรีจิสทรีแพ็คเกจอย่างเป็นทางการสำหรับ Dart และ Flutter ณ เดือนกรกฎาคม 2024 มีแพ็คเกจมากกว่า 45,000 รายการที่เผยแพร่ในรีจิสทรี การติดตั้งแพ็คเกจทำได้ด้วยคำสั่ง flutter pub add <ชื่อแพ็คเกจ> Pub แก้ปัญหาการพึ่งพาโดยอัตโนมัติ ตรวจสอบความเข้ากันได้ของเวอร์ชัน และสร้าง pubspec.lock

การจัดการสถานะ ใน Flutter เป็นหนึ่งในความท้าทายทางสถาปัตยกรรมที่สำคัญ นอกจาก flutter_bloc แล้ว โซลูชันยอดนิยมยังรวมถึง: Provider (แนะนำโดย Google ใช้ InheritedWidget), Riverpod (เวอร์ชันออกแบบใหม่ของ Provider ที่มีความปลอดภัยในเวลาคอมไพล์) และ GetX (ครบวงจร: สถานะ, การกำหนดเส้นทาง, DI) Provider ยังคงง่ายที่สุดสำหรับการเริ่มต้น: ChangeNotifierProvider ห่อหุ้มโมเดล และ Consumer สร้างวิดเจ็ตใหม่เมื่อข้อมูลเปลี่ยนแปลง

การทดสอบ ใน Flutter รองรับสามระดับ การทดสอบหน่วย (flutter test) ตรวจสอบฟังก์ชันและคลาสโดยไม่มี UI การทดสอบวิดเจ็ต (testWidgets) เรนเดอร์วิดเจ็ตแต่ละตัวในสภาพแวดล้อมที่แยกเดี่ยว การทดสอบการรวม (IntegrationTest) รันแอปพลิเคชันเต็มรูปแบบบนอุปกรณ์หรือจำลอง Flutter 3.22 เพิ่มการรองรับการทดสอบแพตช์ผ่านการวิเคราะห์แพตช์และรายงานความครอบคลุมโค้ดที่ปรับปรุงแล้ว

แพ็คเกจยอดนิยม

dio คือ HTTP ไคลเอ็นต์ที่รองรับตัวสกัดกั้น การหมดเวลา และ FormData ใช้ใน 40% ของโปรเจกต์ Flutter บน GitHub Dio รองรับการสกัดกั้นคำขอสำหรับการบันทึก การลองใหม่ และการเพิ่มโทเค็นการรับรองความถูกต้อง ไลบรารียอดนิยมอันดับสองคือ retrofit ซึ่งสร้าง API ไคลเอ็นต์ที่ระบุประเภท

flutter_bloc คือไลบรารีการจัดการสถานะตามรูปแบบ BLoC (ส่วนประกอบตรรกะทางธุรกิจ) BlocProvider ส่งสถานะลงในแผนผังวิดเจ็ต BlocBuilder สร้าง UI ใหม่เมื่อสถานะเปลี่ยนแปลง และ BlocListener จัดการผลข้างเคียง (การนำทาง, SnackBar) Cubit เป็นเวอร์ชันที่เรียบง่ายของ BLoC โดยไม่มีเหตุการณ์

go_router คือการนำทางแบบประกาศสำหรับ Flutter โดย Google เส้นทางอธิบายไว้ในการกำหนดค่า GoRouter พร้อมรองรับเส้นทางซ้อน การเปลี่ยนเส้นทาง และดีปลิงก์ ShellRoute แบ่งการนำทางระหว่างแท็บ BottomNavigationBar GoRouter 14.0 รองรับพาธที่ปลอดภัยชนิดและ StatefulShellRoute พร้อมการรักษาสถานะแท็บ