Flutter : มีอะไรใหม่ใน Flutter 2.2

จากงาน Google io 2021 ทางทีม Flutter ได้เปิดตัว Flutter 2.2 ซึ่งเป็นเวอร์ชันอัพเดทที่มีการปรับปรุงประสิทธิภาพในการทำงานทั้งฝั่ง iOS, Android, website และ Desktop App รายละเอียดที่อัพเดทมีอะไรบ้างมาดูกันเลย

Flutter 2.2 ได้ถูกปรับปรุงอย่างเสถียรแล้ว ซึ่งครอบคลุมการปรับปรุงหลายๆอย่างบน Flutter 2 ด้วย รวมไปถึงการพัฒนาโปรแกรมบน iOS, Android และ เว็บไซต์ เพิ่ม Material icons ใหม่ๆ ปรับปรุงวิธีการจัดการ Text, Scrollbar และ รองรับ mouse cursor สำหรับ TextSpan widget และมีคำแนะนำใหม่ๆ ที่ดีที่สุดในการสร้างสรรค์ผลงานได้หลายหลายแพลตฟอร์มจากโค้ดพื้นฐานอันเดียว และทั้งหมดนี้ถูกสร้างบนภาษา Dart เวอร์ชั่นใหม่

Dart 2.13 ฟีเจอร์ใหม่ได้แก่ การตั้งชื่อตัวแปร type ใหม่ได้ สร้างชื่อ type ใหม่ให้กับ ฟังก์ชันได้ด้วย และการเปลี่ยนชื่อ class

// Type alias for functions (existing)
typedef ValueChanged<T> = void Function(T value);

// Type alias for classes (new!)
typedef StringList = List<String>;

// Rename classes in a non-breaking way (new!)
@Deprecated("Use NewClassName instead")
typedef OldClassName<T> = NewClassName<T>;

Flutter web updates

เปิดการใช้งาน การแสดง semantic node ทับบน widget ช่วยให้การ debug ง่ายขึ้น

$ flutter run -d chrome --profile \
  --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true

Flutter Devtools สนับสนุนการสำรวจเลเอาท์บน flutter app แล้ว

iOS page transitions and incremental installs ในเวอร์ชันนี้ได้ปรับปรุงการเปลี่ยนหน้าจอบน iOS ให้ดูราบรื่นขึ้นกว่าเดิม โดยการลดเวลาในการเรนเดอร์แอนิเมชันเฟรมลง 75% และลดระยะเวลาการติดตั้งและอัพเดทแอพบน iOS ลง 40%

Use Flutter to build platform adptive apps ให้ลองดาวน์โหลดแอพ Flokk และ Folio เป็นกรณีศึกษาในการทำ adptive apps ให้รองรับหน้าจอของทุกแพลตฟอร์ม

More Material icons เพิ่มไอคอนให้มากยิ่งขึ้น ยังมีไอคอนของ Flutter ด้วย

http://fonts.google.com/icons

Impoved text handling ในเวอร์ชันนี้ Flutter ได้มีการปรับปรุงเรื่องของการทำงานของ TextField ในแต่ละแพลตฟอร์ม ตัวอย่างเช่น

การกด Tab บน TextFiled ในเวอร์ชันนี้สามารถเปลี่ยน focus ไปยัง widget ต่อไปได้และ Tab อีกครั้งเพื่อสลับ focus ไปมาได้

การจัดการการกดปุ่ม Enter ใน TextField สามารถกด Enter เพื่อให้ส่งอีเวนท์แบบการส่งข้อความในแอพแชตหรือจะกด Ctrl+Enter เพื่อทำการขึ้นบรรทัดใหม่ได้

การจัดการกับปุ่ม action ที่แตกต่างกันของแต่ละ OS เช่น การกด Ctrl+C ใน Windows และ Linux แต่ต้องกด Cmd+C บน mac ในเวอร์ชันนี้จัดการให้เรียบร้อยแล้ว

หรือจะเป็นการเขียนโปรแกรมเพื่อเปลี่ยนการทำการของปุ่มได้อย่างเช่น การสั่งให้การกดปุ่ม ลูกศรซ้าย หรือ การกด Esc เพื่อเคลียรข้อความ

Automatic scrolling behavior โดยปกติแล้วบนแพลตฟอร์ม iOS และ Android ข้อมูลใน List ที่แสดงเกินหน้าจอจะไม่มีการแสดง scrollbar ให้ตั้งแต่ต้น แต่ถ้าเป็น แพลพฟอร์ม desktop app ตัว scrollbar จะถูกแสดงให้เห็นตั้งแต่ต้น ดังนั้นการปรับปรุงใน Flutter เวอร์ชันใหม่นี้ทำให้ scrollbar ถูกแสดงตั้งแต่ต้นหากเนื้อหาแสดงเกินหน้าจอ และหากต้องการเอาการแสดง scrollbar ออกไม่ให้แสดงตั้งแต่ต้น ก็สามารถไปเซ็ตได้ที่ ScrollBarTheme อ่านคำแนะนำเพิ่มเติมที่ flutter.dev

Mouse cursors over text spans ในเวอร์ชันใหม่นี้ TextSpan ได้ถูกปรับปรุงให้สามารถรับ GestureRecognizer ได้ ทำให้เราสามารถเพิ่มข้อความเป็นต้องการทำ mouse over หรือ ลิ้งค์ภายในข้อความบรรทัดเดียวกันได้เลย

การอัพเดทอื่นๆ

• iOS shader compilation improvement
• Android deferred components
• Flutter Windows UWP alpha : พัฒนา Win UWP App ที่รันบน XBox
• ARM64 Linux host support from Sony
• Flutter ecosystem and tooling updates
• Flutter Favorite updates : FlutterFire packages, Flutter Community “plus” packages, googleapis package, win32 package, intl and characters packages, Sentry packages, infinite_scroll_pagination and flutter_native_splash packages
• FlutterFire updates and Firebase App Check
• Flutter DevTools updates : memory tab allocation stack trace, custom memory events, Provider tab in action
• IDE plugins updates: Visual Studio Code and the IntelliJ/Android Studio IDE
• DartPad workshops : https://dartpad.dev/
• Community Spotlight: FlutterFlow https://flutterflow.io/

วีดีโอแนะนำฟีเจอร์ใหม่จากทีม Flutter

เพิ่มเติม

1. เริ่มต้นศึกษา Flutter https://flutter.dev/docs/get-started/install
2. สิ่งที่เพิ่มมาใน Flutter 2.2 https://medium.com/flutter/whats-new-in-flutter-2-2-fd00c65e2039
3. เนื้อหา dart 2.13 https://medium.com/dartlang/announcing-dart-2-13-c6d547b57067

อ้างอิง : https://medium.com/flutter/whats-new-in-flutter-2-2-fd00c65e2039