Flutter เป็น Framework สำหรับพัฒนาแอปแบบ Cross-Platform ที่สามารถสร้างแอปสำหรับ
Android, iOS, Web และ Desktop จากโค้ดชุดเดียว โครงสร้างของ Flutter ถูกออกแบบมาให้มี
ประสิทธิภาพสูงและสามารถควบคุมการแสดงผลได้อย่างเต็มรูปแบบ
โดยสถาปัตยกรรมของ Flutter แบ่งออกเป็นหลายชั้น (Layers) ที่ทำงานร่วมกัน

ภาพรวมของ Flutter Architecture

สถาปัตยกรรมของ Flutter สามารถแบ่งออกเป็น 3 ชั้นหลัก ได้แก่

• Framework Layer


• Engine Layer


• Embedder Layer

แต่ละ Layer มีหน้าที่แตกต่างกันและช่วยให้ Flutter สามารถทำงานได้อย่างมีประสิทธิภาพ

1. Framework Layer

Framework Layer เป็นส่วนที่นักพัฒนาใช้งานโดยตรง
และเขียนด้วยภาษา Dart ภายใน Layer นี้จะประกอบไปด้วย Widget,
Rendering System และเครื่องมือสำหรับสร้าง UI

องค์ประกอบสำคัญของ Framework ได้แก่

• Widgets – ส่วนประกอบของ UI เช่น Button, Text, Layout


• Rendering – ระบบจัดการการวาด UI บนหน้าจอ


• Animation – ระบบจัดการ Animation


• Gestures – ระบบจัดการการสัมผัสหน้าจอ เช่น Tap และ Swipe

ตัวอย่างการสร้าง Widget ใน Flutter

import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       appBar: AppBar(
         title: Text("Flutter App"),
       ),
       body: Center(
         child: Text("Hello Flutter"),
       ),
     ),
   );
 }
}

2. Engine Layer

Engine Layer เป็นส่วนที่ทำหน้าที่ประมวลผลระดับล่างของระบบ
ซึ่งเขียนด้วยภาษา C++ และทำหน้าที่สำคัญ เช่น

• Rendering Graphics


• Layout System


• Dart Runtime


• Text Rendering

Flutter Engine ใช้ระบบกราฟิกที่ชื่อว่า Skia
ซึ่งช่วยให้สามารถวาด UI ได้อย่างรวดเร็วและทำงานเหมือนกันทุกแพลตฟอร์ม

3. Embedder Layer

Embedder Layer เป็นส่วนที่เชื่อมต่อ Flutter กับระบบปฏิบัติการ
เช่น Android, iOS, Windows หรือ Linux

Layer นี้ทำหน้าที่จัดการสิ่งต่าง ๆ เช่น

• การแสดงผลบนหน้าจอ


• การรับ input จากผู้ใช้


• การเข้าถึง hardware


• การเชื่อมต่อกับระบบของ platform

Flutter Widget System

หนึ่งในแนวคิดสำคัญของ Flutter คือการใช้ Widget ในการสร้าง UI
ทุกองค์ประกอบบนหน้าจอจะถูกสร้างจาก Widget

ประเภทของ Widget ที่สำคัญ

• StatelessWidget – Widget ที่ไม่มีการเปลี่ยนแปลง state


• StatefulWidget – Widget ที่สามารถเปลี่ยน state ได้

ตัวอย่าง StatefulWidget

class CounterApp extends StatefulWidget {
 @override
 _CounterAppState createState() => _CounterAppState();
}
class _CounterAppState extends State<CounterApp> {
 int counter = 0;
 void increase() {
   setState(() {
     counter++;
   });
 }
 @override
 Widget build(BuildContext context) {
   return Column(
     children: [
       Text("Counter: $counter"),
       ElevatedButton(
         onPressed: increase,
         child: Text("Increase"),
       )
     ],
   );
 }
}

Hot Reload

Flutter มีฟีเจอร์ที่เรียกว่า Hot Reload
ซึ่งช่วยให้นักพัฒนาสามารถเห็นผลลัพธ์ของการแก้ไขโค้ดได้ทันที
โดยไม่ต้อง restart แอปใหม่ทั้งหมด

• ช่วยลดเวลาในการพัฒนา


• ทดลอง UI ได้รวดเร็ว


• เหมาะสำหรับการออกแบบ interface

ข้อดีของ Flutter Architecture

• ประสิทธิภาพสูงเพราะใช้ rendering engine ของตัวเอง


• UI ทำงานเหมือนกันทุกแพลตฟอร์ม


• โครงสร้าง widget ช่วยให้สร้าง UI ได้ง่าย


• รองรับ Hot Reload ทำให้พัฒนาได้รวดเร็ว

สรุป

Flutter Architecture ถูกออกแบบให้มีหลาย Layer เพื่อแยกหน้าที่การทำงานอย่างชัดเจน
โดย Framework Layer จะเป็นส่วนที่นักพัฒนาใช้งานในการสร้าง UI
Engine Layer ทำหน้าที่ประมวลผลกราฟิกและ runtime
และ Embedder Layer จะเชื่อมต่อกับระบบปฏิบัติการของแต่ละแพลตฟอร์ม

ด้วยโครงสร้างแบบนี้ Flutter จึงสามารถสร้างแอปที่มีประสิทธิภาพสูง
และทำงานได้เหมือนกันบนหลายแพลตฟอร์มจากโค้ดเพียงชุดเดียว