มีอะไรน่าสนใจบ้างใน Flutter 3.7

Phongharit Pichaiwong
20Scoops CNX
Published in
3 min readFeb 3, 2023

สวัสดีท่านผู้อ่านทุกท่าน สืบเนื่องจากเมื่อวันที่ 25 มกราคม ที่ผ่านมา ทาง Google ได้จัดงาน Flutter Forward 2023 ขึ้น ที่สำคัญได้มีการปล่อย Flutter เวอร์ชัน 3.7 ออกมาอย่างเป็นทางการ ซึ่งในเวอร์ชั่นใหม่ล่าสุดนี้จะมีอะไรที่น่าสนใจหรือเปลี่ยนแปลงไปจากเดิมบ้างมาลองดูกันครับ

Highlight ที่น่าสนใจ

1. การรองรับ Material 3

ซึ่งในเวอร์ชัน 3.7 นี้ Widget หลายๆตัวจะหันมารองรับ Material 3 ยกตัวอย่างเช่น

Ref: What’s new in Flutter 3.7. Material 3 updates, iOS improvements… | by Kevin Chisholm | Flutter | Jan, 2023 | Medium

Material 3
Material 2

สามารถเข้าไปดูตัวอย่างเปรียบเทียบ Widget ระหว่าง Material 3 และ Material 2 ได้ ที่นี่ ครับ โดยสามารถเลือกสลับตัวเลขเวอร์ชันได้ที่ตรงมุมด้านซ้ายล่างครับ 😉

ในส่วนของวิธีการเปิดใช้งาน Material 3 ในโปรเจ็คสามารถทำได้ โดยการไปตั้งค่า config ใน ThemeData widget โดยเซ็ตค่า flag ของ useMaterial3 ให้เป็น true

หรือจะเข้าไปลองปรับแต่งธีมผ่านทาง ThemesPlayGround ได้เช่นกันครับ

Themes Play Ground

ในส่วนของรายละเอียดอื่นๆเพิ่มเติมเกี่ยวกับ Material 3 สามารถเข้าไปอ่านได้ที่ Bring Material 3 to Flutter ครับ

2. เพิ่มประสิทธิภาพการ Render ให้ดียิ่งขึ้นด้วย Impeller

ทาง Flutter team ได้ออกมาประกาศถึงการเปลี่ยนแปลงมาใช้ graphics engine ตัวใหม่ที่ชื่อว่า “Impeller” แทนของเดิมที่ใช้อยู่ก็คือ Skia

เพราะว่าตัว engine เดิมอย่าง Skia ก็มีปัญหาที่ทาง Flutter developer หลายๆคนน่าจะพอรู้กันคือเรื่อง Shader compilation jank

ซึ่งประเด็นปัญหานี้ ทาง YouTuber อย่างคุณ TechLead ก็เคยพูดถึงเอาไว้ได้น่าสนใจ สามารถเข้าไปฟังได้ ที่นี่ ครับ

คาดกันว่าการเปลี่ยนมาใช้ engine ตัวใหม่นี้ นอกจากจะช่วยแก้ปัญหาเกี่ยวกับ jank issues แล้ว จะสามารถช่วยเพิ่มประสิทธิภาพการ render graphics ได้เทียบเท่าหรือดีกว่า engine ตัวเก่าอย่าง Skia อีกด้วย

Impeller rendering engine ซึ่งตอนนี้พร้อมแล้วสำหรับการ preview บน iOS สำหรับ Android ยังต้องรอต่อไปก่อน

3. เพิ่มลูกเล่นใหม่ๆให้กับ DevTools

สำหรับเหล่า developer ถือเป็นอีกหนึ่ง hilight น่าสนใจ นั่นคือการเพิ่มฟีเจอร์และลูกใหม่ๆให้กับ DevTools เช่น การเพิ่มความสามารถในการทำ memory debugging เช่น การเพิ่ม tab ใหม่มา 3 tab คือ Profile, Trace และ Diff เพื่อใช้ในการทำ memory debugging ที่ละเอียดมากขึ้นกว่าเดิม

ref: What’s new in Flutter 3.7. Material 3 updates, iOS improvements… | by Kevin Chisholm | Flutter | Jan, 2023 | Medium

รายละเอียดเพิ่มเติมเกี่ยวกับ memory features ใหม่ๆ สามารถเข้าไปอ่านเพิ่มเติมได้จาก ที่นี่ ครับ

4. ยกเลิกการใช้ Bitcode

อย่างที่เราอาจจะพอทราบกันว่า ก่อนหน้านี้ App Store จะทำการ optimize โค้ดของ app เพื่อให้เหมาะสมกับ devices ประเภทต่างๆก่อนที่จะดาวน์โหลดมาลงจาก Store เช่น watchOS และ tvOS ผ่านสิ่งที่เรียกว่า “Bitcode” โดยหลังจากนี้ การส่ง Flutter app ขึ้น AppStore จะไม่จำเป็นต้องทำการส่ง Bitcode จาก Xcode version 14 เป็นต้นไป

5. ปรับปรุงเกี่ยวกับ Memory Management

ในเวอร์ชันใหม่นี้ มีการปรับปรุงเกี่ยวกับ memory management เช่น การลด jank ที่เกิดจาก garbage collection pauses (a stop-the-world event), การลด CPU utilization ในส่วนของการจัดสรร background GC threads รวมไปถึงการลดการใช้ memory footprint อีกด้วย

6. ปรับปรุงการแสดงผลเกี่ยวกับ Syntax Errors

ตรงส่วนนี้เป็นการปรับปรุงโดย Flutter team เกียวกับการแสดงผลพวก syntax errors ต่างๆในส่วนของรายละเอียด เพื่อให้ทาง developer สามารถเข้าใจได้มากขึ้นกว่าเดิม

7. เพิ่มลูกเล่นในการแสดงผล 3D Graphic/Animation จากไฟล์ 3D model ได้ง่ายยิ่งขึ้น

จากภาพตัวอย่างด้านบน ถ้าเราอยากนำไฟล์ 3d model มาแสดงผลภายใน app ของเรา เช่น ไฟล์สกุล .glb ที่สร้างจาก Blender โดยเราสามารถแสดงผลไฟล์ model ได้ง่ายๆ เช่น

@override
Widget build(BuildContext context) {
return Scene(node: Node.asset('modes/dash.glb', animations: ['Walk']));
}

ส่งท้าย

นอกจากที่กล่าวมาข้างต้น จะเป็นรายละเอียดปลีกย่อย เช่น การปรับปรุงลูกเล่นหรือการเพิ่มประสิทธิภาพของ widget ต่างๆ เช่น Custom context menus, Scrolling improvements, การเพิ่ม AnimatedGrid และSliverAnimatedGrid เข้ามาเป็นต้น

นอกจากนี้ในงาน Flutter Forward 2023 ยังพูดถึงการมาถึงของ Dart 3.0 อีกด้วย (ซึ่งคาดว่าน่าจะถูกปล่อยออกมาภายในกลางปีนี้) ซึ่งรายละเอียดเพิ่มเติมในส่วนอื่นๆ สามารถเข้าไปอ่านเพิ่มกันได้ ที่นี่ ครับ 🙂

--

--

Phongharit Pichaiwong
20Scoops CNX

Team Lead — Senior Mobile (Native Android and React Native), Blockchain and Full Stack Developer.