Flutter คืออะไร ? รู้จักกับเครื่องมือสร้างแอปยอดนิยม ที่ง่าย และรวดเร็ว !

Flutter คืออะไร ? รู้จักกับเครื่องมือสร้างแอปยอดนิยม ที่ง่าย และรวดเร็ว !

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

ในบทความนี้จะพาทุกคนไปรู้จักกับ Flutter เครื่องมือที่ทำให้การสร้างแอปเป็นเรื่องง่าย ทั้งความหมาย, ความเป็นมา, สถาปัตยกรรม, การนำไปใช้งาน และเปรียบเทียบข้อดีข้อเสียของซอฟต์แวร์นี้กันเลย ...

Flutter คืออะไร ? (What is Flutter ?)

Flutter เป็นเทคโนโลยี โอเพ่นซอร์ส (Open-Source) จาก Google ที่ใช้ในการสร้างแอปพลิเคชันบนมือถือ, เดสก์ท็อป และเว็บไซต์ ด้วยการใช้โค้ดเพียงชุดเดียวแตกต่างจากวิธีการอื่น ๆ โดย Flutter ไม่ใช่ เฟรมเวิร์ก (Framework) หรือ ไลบรารี (Library) แต่เป็น ชุดพัฒนาซอฟต์แวร์ SDK (Software Development Kit) แบบครบวงจร ซึ่งแตกต่างจากไลบรารี และ เฟรมเวิร์ก ซึ่งทั้งสองเป็นชุดของเครื่องมือที่เป็นพื้นฐานในการสร้างแอป แต่นักพัฒนาจะต้องเติมโค้ดของตัวเองลงไปเพื่อให้ได้ฟังก์ชันการทำงานที่ต้องการ

แตกต่างจาก Flutter ที่เป็น SDK เพราะเป็นชุดเครื่องมือที่ประกอบไปด้วยไลบรารี, Reference, API และบางครั้งรวมถึงเฟรมเวิร์กไว้ด้วย ซึ่งให้ทุกอย่างที่จำเป็นสำหรับการพัฒนาซอฟต์แวร์จบไว้ในที่เดียว

ภาพจาก : https://upload.wikimedia.org/wikipedia/commons/4/44/Google-flutter-logo.svg

ประวัติความเป็นมาของ Flutter (History of Flutter)

ค.ศ. 2015 (พ.ศ. 2558)

Flutter เริ่มต้นขึ้นภายใต้ชื่อ "Sky" ซึ่งเป็นเครื่องมือพัฒนาที่ออกแบบมาให้ทำงานบนระบบปฏิบัติการ Android เปิดตัวครั้งแรกในงานประชุม Dart Developer Summit ปี ค.ศ. 2015 (พ.ศ. 2558) โดยมีเป้าหมายในการแสดงผลด้วยความเร็วสูงถึง 120 เฟรมต่อวินาที เพื่อให้การพัฒนาแอปพลิเคชันนั้น ลื่นไหล และมีประสิทธิภาพสูง

ค.ศ. 2018 (พ.ศ. 2561)

ในวันที่ 4 ธันวาคม ค.ศ. 2018 (พ.ศ. 2561) Flutter 1.0 ได้เปิดตัวอย่างเป็นทางการที่งาน Flutter Live ที่กรุงลอนดอน ซึ่งเป็นจุดเริ่มต้นของการรองรับการพัฒนาแอปบนทั้ง iOS และ Android ด้วยโค้ดชุดเดียวกัน นับแต่นั้น Flutter ได้เติบโตอย่างรวดเร็วในฐานะเครื่องมือพัฒนาข้ามแพลตฟอร์ม​

ค.ศ. 2021 (พ.ศ. 2564)

ในเดือนมีนาคม ค.ศ. 2021 (พ.ศ. 2564) Google ได้เปิดตัว Flutter 2 ซึ่งเป็นเวอร์ชันที่รองรับการพัฒนาแอปบนทุกแพลตฟอร์มหลักทั้ง iOS, Android, Web, macOS, Windows และ Linux การอัปเดตนี้ขยายขอบเขตของ Flutter ให้ครอบคลุมแพลตฟอร์มที่สำคัญ นอกจากนี้ยังเพิ่มการรองรับ Null Safety เพื่อความปลอดภัย และประสิทธิภาพในการพัฒนาโค้ดมากขึ้น​

ค.ศ. 2022 (พ.ศ. 2565)

ในปี ค.ศ. 2022 (พ.ศ. 2565) Flutter 3 ถูกปล่อยออกมา โดยเพิ่มการรองรับการพัฒนาแอปบนแพลตฟอร์มเดสก์ท็อปอย่างเต็มรูปแบบ รวมถึงการพัฒนาแอปเกมด้วย Flutter Casual Games Toolkit นอกจากนี้ยังมีเครื่องมือใหม่ ๆ สำหรับนักพัฒนา เช่น DevTools และ Material You ที่ช่วยให้การออกแบบ ส่วนต่อประสานกับผู้ใช้ (UI) ให้มีความยืดหยุ่น และปรับตัวตามการตั้งค่าของระบบได้ดีขึ้น​

ภาพจาก : https://medium.com/flutter/announcing-the-flutter-casual-games-toolkit-c22e401d8fee

ค.ศ. 2023 (พ.ศ. 2566)

ล่าสุดในปี ค.ศ. 2023 (พ.ศ. 2566) Flutter ได้พัฒนาไปอีกขั้นกับการเปิดตัว Flutter 3.16 ซึ่งนำเสนอ Material 3 เป็นธีมเริ่มต้น เพิ่มประสิทธิภาพการแสดงผลบนอุปกรณ์ Android ผ่าน Engine เรนเดอร์ใหม่ชื่อ Impeller และเพิ่มเครื่องมือสำหรับการพัฒนาแอปที่เน้นการใช้งานระบบเดสก์ท็อป และเว็บ​ไซต์

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

Flutter SDK เป็นชุดเครื่องมือพัฒนาซอฟต์แวร์ที่ครบวงจร ซึ่งมาพร้อมฟีเจอร์สำคัญต่าง ๆ เช่น เอนจินเรนเดอร์, วิดเจ็ตสำเร็จรูป และ APIs สำหรับการทดสอบ และการรวมระบบ ทีนี้ เรามาดูกันว่าแต่ละองค์ประกอบทำงานอย่างไร และเกี่ยวข้องกันอย่างไร

ภาพจาก : https://www.altexsoft.com/media/2018/11/Flutter-architecture.png

Flutter แบ่งโครงสร้างหลักออกเป็น 3 ชั้นดังนี้

1. Embedder : ใช้ภาษาของแต่ละแพลตฟอร์ม (เช่น Android, iOS) เพื่อให้แอปสามารถทำงานได้บนระบบปฏิบัติการต่าง ๆ
2. Engine : พัฒนาโดยใช้ภาษา C/C++ จัดการกราฟิกด้วย Skia รองรับการจัดการข้อความ การทำงาน I/O กับไฟล์และเครือข่าย รวมถึงการรองรับ Dart runtime
3. Framework : เขียนด้วยภาษา Dart ซึ่งมีไลบรารีหลายชั้นเพื่อช่วยในการสร้างวิดเจ็ต และการเรนเดอร์ UI เช่น Material Design และ Cupertino (สไตล์ iOS)

ภาษา Dart

Dart เป็นภาษาที่ Google พัฒนาขึ้น เพื่อให้สามารถคอมไพล์เป็นโค้ดได้ทั้งบนมือถือและเดสก์ท็อป ส่วน จาวาสคริปต์ (JavaScript) สำหรับเว็บได้ ซึ่งการคอมไพล์แบบโดยตรงนี้ทำให้แอปที่พัฒนาด้วย Flutter ทำงานได้เร็วขึ้นเมื่อเปรียบเทียบกับเทคโนโลยีอื่น ๆ เช่น React Native

วิดเจ็ตใน Flutter

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

เครื่องมือทดสอบ และ Debugging

Flutter มีเครื่องมือสำหรับการทดสอบ 3 ประเภท ได้แก่ Unit Test, Widget Test, และ Integration Test ซึ่งช่วยให้การพัฒนามีประสิทธิภาพ นอกจากนี้ยังมีเครื่องมือ Flutter DevTools สำหรับการตรวจสอบการทำงานของแอป เช่น วิเคราะห์ประสิทธิภาพ และดีบักแอปอย่างละเอียด

การเชื่อมต่อกับระบบ CI

Flutter รองรับการทำงานแบบ Continuous Delivery ด้วยการเชื่อมต่อกับเครื่องมือ CI ยอดนิยมอย่าง Jenkins, Travis, หรือ Cirrus ผ่านแพลตฟอร์ม Fastlane

Flutter ใช้ทำอะไรได้บ้าง ? (What is Flutter used for ?)

Flutter ถูกเลือกใช้โดยบริษัทใหญ่ ๆ มากมายสำหรับออกแบบแอปมือถือ เช่น Toyota, BMW, eBay, Alibaba Group, Groupon, และ Etsy เป็นต้น Flutter ช่วยให้บริษัทเหล่านี้สามารถสร้างแอปที่มีเอกลักษณ์ และครอบคลุมการใช้งานข้ามแพลตฟอร์มได้อย่างมีประสิทธิภาพ

นอกจากบริษัทใหญ่แล้ว Flutter ยังเหมาะสมกับสตาร์ทอัปด้วย เนื่องจากเป็นโอเพ่นซอร์ส มีฟีเจอร์ครบครัน ประหยัดค่าใช้จ่าย ตัวอย่างสตาร์ทอัพที่ใช้ Flutter เช่น

• Nubank : ธนาคารดิจิทัลที่ใหญ่ที่สุดในลาตินอเมริกา
• Invoice Ninja : แพลตฟอร์มจัดการใบแจ้งหนี้และการชำระเงินสำหรับธุรกิจขนาดเล็ก
• Reflectly : แอปด้านสุขภาพจิตที่ใช้ เทคโนโลยี AI

Flutter ไม่เพียงแต่ถูกใช้ในการพัฒนาแอปมือถือข้ามแพลตฟอร์มเท่านั้น แต่ยังเหมาะสำหรับการพัฒนา MVPs (Minimum Viable Products) และการทำต้นแบบ ด้วยการพัฒนาที่รวดเร็ว และพกพาง่าย จึงเหมาะสำหรับการทดสอบไอเดียธุรกิจบนแพลตฟอร์มต่าง ๆ ได้อย่างรวดเร็ว

สำหรับการพัฒนาเว็บ Flutter ยังเป็นทางเลือกที่ดีสำหรับการสร้าง Progressive Web Apps (PWAs) และ Single-Page Applications (SPAs) อีกด้วย นอกจากนี้ยังสามารถขยายโปรเจ็กต์แอปมือถือเดิมไปยังเว็บ และเดสก์ท็อปได้เช่นกัน

ข้อดี และข้อเสียของการพัฒนาแอปด้วย Flutter (Pros and Cons of Flutter development)

ข้อดีของการพัฒนาแอปด้วย Flutter

วิดเจ็ตของ Flutter ช่วยให้เขียน UI ได้รวดเร็ว

Flutter ใช้วิดเจ็ตสำเร็จรูปในการสร้าง UI ซึ่งเป็นนวัตกรรมที่ทำให้การสร้างส่วนติดต่อผู้ใช้ทำได้อย่างรวดเร็ว และมีความสอดคล้อง ทุกอย่างใน Flutter เป็นวิดเจ็ต ตั้งแต่ปุ่มไปจนถึงการเว้นระยะห่าง และ ฟอนต์ (Font) นอกจากนี้ ยังสามารถปรับแต่งวิดเจ็ตตามความต้องการได้ง่าย ๆ อีกด้วย

ภาพจาก : https://www.altexsoft.com/media/2018/11/Flutter-architecture.png

ภาษา Dart ง่ายต่อการเรียนรู้ และใช้งาน

ภาษา Dart ที่ใช้ใน Flutter มีโครงสร้างที่คล้ายกับ Java หรือ C++ ทำให้นักพัฒนาที่มีพื้นฐานภาษาเหล่านี้สามารถเรียนรู้ได้ง่าย Dart รองรับการคอมไพล์ทั้งแบบ AOT (Ahead-of-Time) ซึ่งช่วยให้แอปเริ่มทำงานได้เร็ว และแบบ JIT (Just-in-Time) ซึ่งช่วยให้การทดสอบ และพัฒนาแอปทำได้ง่ายขึ้น

Hot Reload ช่วยเพิ่มประสิทธิภาพการทำงาน

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

ประสิทธิภาพสูง

Flutter สามารถแสดงผลที่ 60 fps และสูงสุดที่ 120 fps ในอุปกรณ์ที่รองรับ และเนื่องจากไม่มีสะพานเชื่อมเหมือน React Native การทำงานของแอปจึงราบรื่น และรวดเร็วกว่า

รองรับหลายแพลตฟอร์ม

Flutter รองรับการพัฒนาแอปบนหลายแพลตฟอร์มจากโค้ดชุดเดียว ทั้ง iOS, Android, macOS, Windows, Linux รวมถึงเว็บไซต์ ทำให้นักพัฒนาสามารถสร้างแอปที่ทำงานได้บนทุกแพลตฟอร์มพร้อมกัน ลดเวลาพัฒนา และค่าใช้จ่าย

มีเอกสาร และแหล่งเรียนรู้ที่ดี

Flutter มีเอกสารที่จัดทำอย่างละเอียดเข้าใจง่าย พร้อมทั้งมีวิดีโอสอนจากทีมงาน Google นอกจากนี้ยังมีคอร์สออนไลน์ และกลุ่มผู้พัฒนาที่คอยช่วยเหลือในชุมชนต่าง ๆ เช่น Stack Overflow, Discord, และ Reddit เป็นต้น

สนับสนุนโดย Google

Flutter ได้รับการสนับสนุนจาก Google อย่างเต็มที่ ถูกใช้ในโปรเจกต์ใหญ่ ๆ ของ Google เองเช่น Fuchsia OS ทำให้มั่นใจได้ว่าจะมีการอัปเดต และแก้ไขบั๊กอย่างต่อเนื่อง

ข้อเสียของการพัฒนาแอปด้วย Flutter (Cons of Flutter development)

การขาดไลบรารีจากบุคคลที่สาม

ไลบรารีจากบุคคลที่สามมีบทบาทสำคัญในการช่วยลดเวลาการพัฒนาโดยไม่ต้องเขียนโค้ดใหม่ทั้งหมด เทคโนโลยีเก่าที่เป็นที่นิยม มักจะมีไลบรารีที่พร้อมใช้จำนวนมาก แต่ Flutter ซึ่งยังใหม่กว่า มีไลบรารีและแพ็คเกจน้อยกว่าเมื่อเทียบกับคู่แข่งอย่าง React Native แต่ Flutter ก็มีไลบรารีมากกว่า 25,000 ไลบรารีในแหล่งข้อมูลของตัวเอง และมีจำนวนที่ยังเพิ่มขึ้นเรื่อย ๆ

ความนิยมน้อยของภาษา Dart

ภาษา Dart ที่ใช้ใน Flutter ยังไม่ได้รับความนิยมเท่าภาษาโปรแกรมอื่น ๆ อย่าง JavaScript หรือ Java ซึ่งทำให้การหานักพัฒนาที่มีทักษะในการเขียน Dart ค่อนข้างท้าทาย ถึงแม้ว่า Dart จะเป็นภาษาที่เรียนรู้ได้ง่าย และรวดเร็ว แต่ยังไม่เป็นที่รู้จักมากนักเมื่อเทียบกับภาษาโปรแกรมหลักอื่น ๆ

ภาพจาก : https://dart.dev/

ขนาดของแอป

แอปที่พัฒนาด้วย Flutter มีขนาดไฟล์เริ่มต้นที่ประมาณ 4MB ซึ่งใหญ่กว่าขนาดของแอปที่พัฒนาด้วย Java หรือ Kotlin ซึ่งอยู่ที่ 500 KB. ขึ้นไป แต่เทคโนโลยีคู่แข่งอย่าง React Native และ Xamarin ก็มีปัญหานี้เช่นกัน โดยแอปใน React Native มีขนาดประมาณ 7MB และ Xamarin อยู่ประมาณ 16 MB.

วิธีเริ่มต้นใช้งาน Flutter (How to get started with Flutter ?)

1. ตรวจสอบสเปกของระบบ

• ผู้ใช้ Windows ต้องใช้ Windows 10 ขึ้นไป บนระบบ CPU แบบ 64 บิต มีพื้นที่ว่างอย่างน้อย 1.64 GB และติดตั้ง PowerShell 5.0 กับ Git for Windows
• ผู้ใช้ macOS ต้องมีพื้นที่ว่างอย่างน้อย 2.8 GB และติดตั้ง Xcode เวอร์ชันล่าสุด
• สำหรับผู้ใช้ Linux ต้องใช้พื้นที่เพียง 600 MB พร้อมติดตั้งเครื่องมือ Command-Line ที่จำเป็น

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

เลือกระบบปฏิบัติการที่ใช้ และทำตามคำแนะนำ Flutter รองรับการพัฒนาทั้ง iOS และ Android แต่ต้องใช้เครื่องมือพัฒนาเฉพาะของแต่ละแพลตฟอร์ม สำหรับการพัฒนาเว็บ เราจะต้องมี Chrome ติดตั้งอยู่แล้ว สามารถดาวน์โหลดได้จากเว็บไซต์นี้ ดาวน์โหลด Flutter ได้เลย

3. ติดตั้งโปรแกรมแก้ไขโค้ด (Editor)

สามารถเลือกใช้ IDE ใดก็ได้ที่รองรับคำสั่งของ Flutter แต่ Google แนะนำให้ใช้ปลั๊กอินสำหรับ Android Studio, IntelliJ หรือ Visual Studio ซึ่งเป็นโปรแกรมที่รองรับ Flutter อย่างเป็นทางการ

ภาพจาก : https://code.visualstudio.com

Flutter เป็นเครื่องมือพัฒนาซอฟต์แวร์ สำหรับการสร้างแอปพลิเคชันบนมือถือ, เดสก์ท็อป, และเว็บไซต์ โดยใช้โค้ดเพียงชุดเดียว ซึ่งช่วยลดเวลาการพัฒนา และค่าใช้จ่าย นอกจากนี้ Flutter ยังมีฟีเจอร์ที่โดดเด่นอย่าง Hot Reload ที่ทำให้เห็นการเปลี่ยนแปลงโค้ดได้ทันทีโดยไม่ต้องรีสตาร์ทแอป

แต่ Flutter ก็ยังคงมีข้อเสียอยู่เช่น ขนาดไฟล์แอปที่ใหญ่กว่าวิธีการอื่น ๆ และการขาดไลบรารีจากบุคคลที่สามเมื่อเทียบกับ React Native แต่ด้วยการสนับสนุนจาก Google และชุมชนที่เติบโตอย่างรวดเร็ว Flutter ยังคงเป็นตัวเลือกที่น่าสนใจสำหรับการพัฒนาแอปข้ามแพลตฟอร์มนั่นเอง