สรุปฟีเจอร์ใหม่ใน Flutter 2

 

          สวัสดีจ้าาาาา กลับมาพบกันอีกครั้งกับบทความที่นาน ๆ จะโพสที วันนี้ผมก็จะมาสรุปฟีเจอร์ใหม่ของ Flutter เวอร์ชั่น 2 ที่เพิ่งเปิดตัวในงาน Flutter Engage ไปในวันที่ 3 มีนาคม 2564 ที่ผ่านมา (ซึ่งตรงกับวันที่ 4 มีนาคม 2564 ของไทย) โดยในงานเปิดตัวครั้งนี้ได้มีการอัพเกรด Flutter ครั้งใหญ่ซึ่งจะช่วยให้การพัฒนาแอปพลิเคชันแบบ Multi-Platform ทำได้ง่ายยิ่งขึ้น

          Flutter รองรับการเขียน Native apps บน 5 ระบบปฏิบัติการ ได้แก่ iOS, Android, Windows, macOS และ Linux นอกจากระบบปฏิบัติการข้างต้นแล้ว Flutter ยังรองรับการพัฒนาแอปพลิเคชันที่ทำงานบนเว็บบราวเซอร์ รวมไปถึง Smart device ต่าง ๆ เช่น รถยนต์ หรือทีวีอีกด้วย เรียกได้ว่าเขียนโค้ดชุดเดียวแล้วสามารถแปลงไปเป็นแอปพลิเคชันที่ทำงานได้กับทุกอุปกรณ์เลยทีเดียว .....เอาล่ะ เกริ่นกันมานานแล้ว เราไปดูกันดีกว่าว่ามีอะไรใหม่ใน Flutter 2 กันบ้าง

Web

          เริ่มที่อัพเกรดแรกคือการประกาศรองรับการเขียนเว็บแอปพลิเคชันเต็มรูปแบบ ปรับเปลี่ยนจากเวอร์ชั่น beta เป็นเวอร์ชั่น stable และรองรับฟีเจอร์ต่าง ๆ ได้แก่

• Progressive web apps (PWAs)
• Single page apps (SPAs)
• สามารถพอร์ต Mobile Application ไปเป็น Web Application โดยใช้โค้ดชุดเดียวกันได้เลย

โดยการอัพเกรดครั้งนี้ได้มีการปรับปรุง architecture ครั้งใหญ่ ซึ่งช่วยปรับปรุงประสิทธิภาพในด้านต่าง ๆ เช่น

• Performance: เพิ่มตัวเลือกการ render เป็น 2 แบบ ได้แก่
• HTML renderer ที่มีขนาดเล็ก เข้ากันได้ดีกับ HTML elements, CSS, Canvas elements, และ SVG elements
• CanvasKit renderer ที่ใช้ WebAssembly และ WebGL ในการรันคำสั่ง Skia paint บนเว็บเบราว์เซอร์ เข้ากันได้ดีกับ Flutter mobile และ desktop แต่ก็แลกกับขนาดที่ใหญ่กว่า HTML renderer
• Web-specific Features: เพิ่มฟีเจอร์ Custom URL สำหรับควบคุม URL บน address bar เพิ่ม Link Widget ในการจัดการลิงค์ไปยังที่ต่าง ๆ ทั้งภายในและภายนอกแอพ รวมไปถึงเพิ่มระบบ layout สำหรับจัดวางข้อความ
• Desktop form factors: เพิ่มประสิทธิภาพของการ render เว็บบน desktop เนื่องจากบน desktop จะใช้เม้าส์ในการควบคุม ซึ่งจะแตกต่างจากการควบคุมด้วยนิ้วบน mobile
• Plugins: รองรับ Plugin ecosystem ทำให้สามารถใช้งาน Flutter Application บนเว็บได้ สามารถเข้าถึง JavaScript Library ผ่านปลั๊กอิน

Sound Null Safety

          นอกจาก Flutter จะอัพเกรดเป็นเวอร์ชั่น 2 แล้ว ภาษา Dart ที่อยู่คู่กับ Flutter มานานก็มีการอัพเกรดเป็นเวอร์ชั่น 2.12 เช่นกัน มีการเพิ่มฟีเจอร์สำหรับแยกแยะประเภทตัวแปรออกเป็น nullable type และ non-nullable type ช่วยในการตรวจจับ null error ป้องกันไม่ให้แอปพลิเคชันเกิด Crash ได้

Desktop

          Flutter Desktop ถูกปรับสถานะเป็น Stable มีการปรับปรุงการทำงานของ Widget เช่น Scrollbar, ReorderableListView และตัวอื่น ๆ เพื่อให้รองรับการใช้งานด้วยเม้าส์บน Desktop

Google Mobile Ads

          นอกจาก Flutter Desktop แล้ว ในงานนี้ยังมีการเปิดตัว Google Mobile Ads SDK for Flutter เวอร์ชั่น beta ซึ่งเป็นปลั๊กอินตัวใหม่ที่ให้บริการแสดงโฆษณาในแอปพลิเคชัน โดยเจ้าปลั๊กอินตัวนี้ยังรองรับ Ad Manager และ Admob อีกด้วย

New iOS features

          ถึง Flutter จะเป็นของ Google แต่ก็ไม่ใช่จะมีแค่อัพเดตในส่วนของ Android เท่านั้นนะ ในเวอร์ชั่นนี้ Flutter ได้เพิ่ม widget ที่มีการแสดงผล UI แบบของใน iOS เช่น CupertinoSearchTextField ที่มีการแสดงผลเป็นแบบ iOS search bar และ CupertinoFormSection, CupertinoFormRow, CupertinoTextFormFieldRow ที่มีการแสดงผลเป็นแบบ validated form ที่แบ่งส่วนตามแบบของ iOS

New widgets

          Flutter เวอร์ชั่นนี้มาพร้อมกับ widget ตัวใหม่สองตัว ได้แก่ AutocompleteCore ที่ใช้สำหรับเติมข้อความอัตโนมัติลงใน Flutter Application และ ScaffoldMessenger ที่ใช้ควบคุมการแสดงผลของ  SnackBar

Add-to-App

          Add-to-App ฟีเจอร์ที่ช่วยให้นักพัฒนาอย่างเราสามารถนำ Flutter Application เข้าไปใส่ในลงในแอปพลิเคชัน iOS และ Android ที่มีอยู่แล้วในรูปแบบของ Library หรือ Module

Flutter Fix

          เมื่อ framework มีการอัพเกรดเวอร์ชั่นก็อาจส่งผลให้มีคำสั่งหรือ API บางตัวถูกยกเลิกการใช้งาน แต่ด้วยฟีเจอร์ใหม่ที่เรียกว่า Flutter Fix จะช่วยทำการค้นหาคำสั่งหรือ API ที่ถูกยกเลิกใช้งานไปแล้ว และแสดงวิธีอัปเดตคำสั่งหรือ API เหล่านั้น เพื่อให้ code ของเราสามารถรันได้ตามปกติ

Flutter Folio Sample

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

          และนี่ก็คืออัพเดตใหญ่ ๆ ของ Flutter 2 ในงาน Flutter Engage ที่ผ่านมา หากเพื่อน ๆ สนใจรายละเอียดเพิ่มเติมก็สามารถเข้าไปอ่านได้ที่นี่ .....สุดท้ายนี้ผมก็หวังว่าจะได้กลับมาเขียนบทความบ่อยขึ้นครับ แล้วพบกันใหม่ในบทความถัดไป (เร็ว ๆ นี้?????) บ๊ายบาย

Continue reading →