1. เอนจิ้นสเกีย (Skia Engine)
2. ภาษา Dart
3. กรอบการทำงาน (Flutter Framework)
3.1 เลเยอร์วิดเจ็ต (Widgets Layer)
3.2 เลเยอร์การแสดงผล (Rendering Layer)
3.3 เลเยอร์การบริการ (Services Layer)
3.4 แอนิเมชั่นเลเยอร์ (Animation Layer)
3.5 เลเยอร์ท่าทางสัมผัส (Gesture Layer)
4. วิดเจ็ตและ Platform Embedder
Flutter เป็นชุดเครื่องมือ UI แบบโอเพ่นซอร์สยอดนิยมที่พัฒนาโดย Google ซึ่งช่วยให้นักพัฒนาสามารถทำแอพที่คอมไพล์แล้วสำหรับรับทำแอพ มือถือ เว็บ และเดสก์ท็อปโดยใช้โค้ดเบสเดียว เพื่อให้เข้าใจและชื่นชมความสามารถของ Flutter อย่างถ่องแท้ จำเป็นต้องดำดิ่งลงไปในสถาปัตยกรรม ซึ่งประกอบด้วยกลไก Skia, ภาษา Dart และกรอบการทำงาน (Framework) ของ Flutter ในบทความนี้ เราจะสำรวจองค์ประกอบเหล่านี้และการทำงานร่วมกันขององค์ประกอบเหล่านี้ ซึ่งช่วยให้คุณมีรากฐานที่มั่นคงสำหรับการทำแอพ Flutter ในอนาคต
1. เอนจิ้นสเกีย (Skia Engine)
หัวใจสำคัญของกระบวนการเรนเดอร์ของ Flutter คือเอนจิ้น Skia ซึ่งเป็นไลบรารีกราฟิก 2D แบบโอเพ่นซอร์สที่ให้ความสามารถในการเรนเดอร์ระดับต่ำ (low-level) Skia เขียนด้วย C++ และมีหน้าที่วาดองค์ประกอบ UI ทั้งหมด รวมถึงข้อความ รูปร่าง และรูปภาพ รองรับอุปกรณ์เอาต์พุตที่หลากหลาย เช่น หน้าจอ เครื่องพิมพ์ และไฟล์ ตลอดจนรูปแบบไฟล์ต่างๆ เช่น PNG, JPEG และ SVG
Flutter ใช้ประโยชน์จากความสามารถของ Skia เพื่อให้แน่ใจว่ากราฟิกที่แสดงผลบนแพลตฟอร์มต่างๆ จะรักษารูปลักษณ์และความรู้สึกที่สอดคล้องกัน ด้วยการใช้ Skia เป็นเครื่องมือแสดงผล Flutter สามารถมอบประสิทธิภาพที่ยอดเยี่ยมและชุดคุณสมบัติมากมายสำหรับการทำแอพที่ดึงดูดสายตา
2. ภาษา Dart
Dart เป็นภาษาการเขียนโปรแกรมทำแอพเชิงวัตถุแบบคลาสที่พัฒนาโดย Google ได้รับเลือกให้เป็นภาษาหลักสำหรับการทำแอพ Flutter เนื่องจากการเรียนรู้ที่ง่าย เครื่องมือที่แข็งแกร่ง และประสิทธิภาพที่ยอดเยี่ยม
คุณลักษณะเด่นบางประการของ Dart ได้แก่:
- การคอมไพล์แบบ Just-In-Time (JIT) และ Ahead-of-Time (AOT): การคอมไพล์แบบ JIT ช่วยให้วงจรการพัฒนารวดเร็วด้วยการรีโหลดแบบด่วน ในขณะที่การคอมไพล์ AOT ช่วยให้มั่นใจถึงประสิทธิภาพสูงสุดสำหรับรุ่นที่วางจำหน่าย
- การรวบรวมขยะ (Garbage collection): Dart จัดการหน่วยความจำโดยอัตโนมัติ ลดความซับซ้อนของกระบวนการพัฒนา และลดโอกาสที่หน่วยความจำจะรั่วไหล
- การเขียนโปรแกรมแบบอะซิงโครนัส: ไวยากรณ์ async/await ของ Dart และ Future and Stream API ช่วยอำนวยความสะดวกในการจัดการงานแบบอะซิงโครนัสโดยไม่ต้องเรียกกลับที่ซับซ้อน
- การพิมพ์ที่รัดกุม (Strong typing): ระบบการพิมพ์ที่รัดกุมของ Dart ช่วยตรวจจับข้อผิดพลาดระหว่างการพัฒนา ปรับปรุงคุณภาพของโค้ดและการบำรุงรักษา
3. กรอบการทำงาน (Flutter Framework)
กรอบการทำงาน Flutter คือชุดของไลบรารีและเครื่องมือที่สร้างขึ้นโดยใช้ภาษา Dart โดยมีส่วนประกอบพื้นฐานสำหรับการทำแอพ เช่น วิดเจ็ต เลย์เอาต์ การโต้ตอบ และแอนิเมชัน กรอบประกอบด้วยหลายชั้น:
3.1 เลเยอร์วิดเจ็ต (Widgets Layer)
หัวใจของกระบวนทัศน์การพัฒนา UI ของ Flutter คือวิดเจ็ต ซึ่งเป็นส่วนประกอบขนาดเล็กที่นำมาใช้ซ้ำได้ ซึ่งอธิบายว่าอินเทอร์เฟซของการทำแอพควรมีลักษณะอย่างไร ใน Flutter ทุกอย่างเป็นวิดเจ็ต รวมถึงข้อความ รูปภาพ ปุ่ม และแม้กระทั่งโครงสร้างเค้าโครงของแอพ วิดเจ็ตสามารถรวมกันเพื่อสร้างองค์ประกอบ UI ที่ซับซ้อนมากขึ้น ทำให้เกิดโครงสร้างแบบต้นไม้ที่เรียกว่าแผนผังวิดเจ็ต
มีวิดเจ็ตสองประเภทใน Flutter:
- วิดเจ็ตไร้สถานะ (Stateless widgets): วิดเจ็ตเหล่านี้เป็นแบบคงที่และไม่เก็บสถานะที่ไม่แน่นอนใดๆ ลักษณะที่ปรากฏถูกกำหนดโดยการกำหนดค่าเท่านั้น ซึ่งส่งผ่านผ่านตัวสร้าง
- วิดเจ็ตแบบมีสถานะ (Stateful widgets): วิดเจ็ตเหล่านี้สามารถจัดเก็บสถานะที่ไม่แน่นอนและวาดใหม่เมื่อสถานะเปลี่ยนแปลง
3.2 เลเยอร์การแสดงผล (Rendering Layer)
เลเยอร์การเรนเดอร์มีหน้าที่ในการแปลแผนผังวิดเจ็ตเป็นชุดของอ็อบเจกต์การเรนเดอร์ที่สามารถวาดบนหน้าจอได้ วิดเจ็ตแต่ละรายการมีออบเจกต์การแสดงผลที่สอดคล้องกันซึ่งจัดการเค้าโครง การลงสี และการทดสอบการเข้าชม (เช่น การพิจารณาว่าเหตุการณ์การสัมผัสหรือการคลิกของผู้ใช้เกิดขึ้นภายในขอบเขตของวิดเจ็ตหรือไม่) วัตถุเรนเดอร์ทำงานอย่างใกล้ชิดกับเอนจิ้น Skia เพื่อให้แน่ใจว่า UI ถูกวาดอย่างมีประสิทธิภาพและแม่นยำ
3.3 เลเยอร์การบริการ (Services Layer)
เลเยอร์บริการจัดเตรียม API สำหรับการเข้าถึงบริการเฉพาะแพลตฟอร์มต่างๆ เช่น การจัดการอินพุต เครือข่าย ที่เก็บข้อมูล และเซ็นเซอร์ เลเยอร์นี้จำเป็นสำหรับการรวมแอปพลิเคชัน Flutter เข้ากับแพลตฟอร์มพื้นฐาน และรับประกันการทำงานข้ามแพลตฟอร์มที่ราบรื่น
3.4 แอนิเมชั่นเลเยอร์ (Animation Layer)
เลเยอร์แอนิเมชั่นช่วยให้นักพัฒนาสามารถทำแอพที่สร้างประสบการณ์ที่ดึงดูดสายตาโดยจัดเตรียมชุดของ API สำหรับสร้างและจัดการแอนิเมชั่น ระบบแอนิเมชั่นของฟลัตเตอร์รองรับแอนิเมชั่นทั้งโดยนัยและชัดเจน แอนิเมชันโดยนัยนั้นเรียบง่ายและเปลี่ยนโดยอัตโนมัติระหว่างค่าคุณสมบัติสองค่า ในขณะที่แอนิเมชันที่ชัดเจนช่วยให้นักพัฒนาควบคุมจังหวะเวลา เส้นโค้ง และพฤติกรรมของแอนิเมชันได้มากขึ้น
3.5 เลเยอร์ท่าทางสัมผัส (Gesture Layer)
เลเยอร์รูปแบบลายเส้นมีหน้าที่จัดการเหตุการณ์การป้อนข้อมูลของผู้ใช้ เช่น การแตะ การปัด และการบีบนิ้ว โดยจะตรวจจับและจดจำท่าทางสัมผัสต่างๆ แปลงเป็นการกระทำเชิงความหมายที่แอปพลิเคชันสามารถประมวลผลได้ ด้วยการแยกระบบการจดจำท่าทางของแพลตฟอร์มพื้นฐานออกไป Flutter ช่วยให้มั่นใจได้ถึงการจัดการท่าทางที่สอดคล้องกันในแพลตฟอร์มต่างๆ
4. วิดเจ็ตและ Platform Embedder
เพื่อมอบประสบการณ์ที่ราบรื่นในหลายแพลตฟอร์ม Flutter ใช้ตัวฝังแพลตฟอร์มซึ่งมีหน้าที่รับผิดชอบในการผสานรวมเครื่องยนต์ Flutter เข้ากับแพลตฟอร์มพื้นฐาน ตัวฝังจะจัดการงานต่าง ๆ เช่น การจัดการหน้าต่างของแอปพลิเคชัน แสดงผลกราฟิกออกไปยังหน้าจอ และส่งต่อเหตุการณ์อินพุตไปยัง Flutter engine
เฟรมเวิร์ก Flutter ประกอบด้วยตัวฝังสำหรับแพลตฟอร์ม Android, iOS, เว็บ และเดสก์ท็อป เพื่อให้มั่นใจว่านักพัฒนาสามารถทำแอพสำหรับอุปกรณ์ที่หลากหลายโดยไม่ต้องเขียนโค้ดเฉพาะแพลตฟอร์ม
การทำความเข้าใจสถาปัตยกรรมของ Flutter เป็นสิ่งสำคัญสำหรับนักพัฒนาที่ต้องการใช้ประโยชน์จากศักยภาพของเฟรมเวิร์กอย่างเต็มที่ เครื่องยนต์ Skia, ภาษา Dart และเลเยอร์ต่างๆ ภายในเฟรมเวิร์ก Flutter ทำงานร่วมกันเพื่อสร้างสภาพแวดล้อมที่ทรงพลัง ยืดหยุ่น และมีประสิทธิภาพสำหรับการสร้างแอปพลิเคชันที่สวยงามและมีประสิทธิภาพสูง
ด้วยความเข้าใจอย่างถ่องแท้เกี่ยวกับสถาปัตยกรรมของ Flutter คุณจะพร้อมมากขึ้นในการทำแอพ Flutter ที่ทำงานได้อย่างราบรื่นบนหลายแพลตฟอร์ม มอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยม และโดดเด่นในตลาดการรับทำแอพที่มีการแข่งขันสูงขึ้น