Flutter 3 - Những cập nhật mới có gì hot

Bài viết sẽ giúp bạn hiểu hơn về bản phát hành mới nhất của team Flutter, bao gồm giúp cho hệ điều hành MacOS và Linux ổn định, cải tiến hiệu năng và còn nhiều hơn thế nữa!

Mới chỉ 3 tháng trước, team Flutter đã công bố hỗ trợ Flutter cho Windows. Hôm nay, Flutter vui mừng khi thông báo rằng Flutter hiện đã ổn định cho cả MacOS, Linux và cả Windows!

Nhờ sự tích cực và chăm chỉ của các cộng tác viên, team Flutter đã merge 5248 pull requests, bao gồm cả những tính năng mới và fix lỗi.

1. Các ứng dụng trên Desktop đã sẵn sàng để chạy production

App Flutter chạy trên hệ điều hành Linux và MacOS đã ổn định và bao gồm các tính năng sau:

1.1 Cascading menus and support for the macOS system menu bar:

Giờ đây, bạn có thể tạo được các thanh menu hiển thị trên platform-rendered MacOS bằng cách sử dụng tiện ích PlatformMenuBar , hỗ trợ chèn các platform-only menu và kiểm soát những gì xuất hiện trong menu ứng dụng MacOS.

1.2 Full support cho international text input:

International text input, bao gồm các ngôn ngữ như tiếng Trung, tiếng Nhật và tiếng Hàn, được hỗ trợ đầy đủ trên 3 desktop platform, bao gồm các phương thức nhập của bên thứ ba như Sogou và Google Japanese Input.

1.3 Accessibility:

Flutter chạy trên Windows, MacOS và Linux đã hỗ trợ các dịch vụ trợ năng (Accessibility) như trình đọc màn hình (screen-readers), accessible navigation và inverted colors.

1.4 Universal binaries by default on macOS

Kể từ khi có Flutter 3, các ứng dụng chạy trên MacOS đã được xây dựng dưới dạng universal binaries, với việc hỗ trợ riêng cho cả máy Mac chạy Intel và các thiết bị Apple Silicon mới nhất của Apple.

1.5 Deprecating Windows 7-8

Với bản phát hành này, team Flutter khuyến nghị nâng phiên bản Windows lên Windows 10. Mặc dù team Flutter không chặn chạy trên các phiên bản cũ (Windows 7, Windows 8, Windows 8.1), nhưng các phiên bản kể trên không còn được Microsoft hỗ trợ nữa và team Flutter cũng chỉ có thể cung cấp những thử nghiệm giới hạn ở bản phát hành này. Mặc dù team Flutter sẽ tiếp tục cung cấp hỗ trợ cho các phiên bản cũ, nhưng team Flutter vẫn khuyến khích bạn nâng cấp.

Lưu ý: team Flutter tiếp tục cung cấp hỗ trợ cho các ứng dụng Flutter chạy trên Windows 7 và Windows 8; thay đổi này chỉ ảnh hưởng đến môi trường phát triển được khuyến nghị.

2. Những cập nhật trên Mobile:

Các bản cập nhật của team Flutter cho các mobile platform gồm những phần sau:

2.1 Hỗ trợ Foldable phone (điện thoại gập):

Flutter 3 hỗ trợ các thiết bị foldable mobile. Trong sự hợp tác do Microsoft tiên phong, các tính năng và tiện ích mới cho phép bạn tạo ra những trải nghiệm mới lạ, năng động và thú vị trên các thiết bị foldable.

MediaQuery bây giờ đã có thêm danh sách DisplayFeatures, mô tả các giới hạn (bounds) và trạng thái của các phần tử thiết bị như hinges, fold và cuntout. Ngoài ra, tiện ích DisplayFeatureSubScreen còn có thể hiển thị tính năng con của nó mà không bị chồng chéo lên các giới hạn DisplayFeaturesvà đã được tích hợp với các   dialogs mặc định của framework và pop-ups.

‌‌Rất cảm ơn nhóm Microsoft, và đặt biệt là @andreidiaconu, vì những đóng góp của họ!

Hãy thử các mẫu giả lập Surface Duo , bao gồm một nhánh (branch) đặc biệt của Flutter Gallery, để xem các màn hình kép của Flutter đang hoạt động.

2.2 iOS variable refresh rate support:

Flutter hiện hỗ trợ tốc độ quét màn hình trên các thiết bị iOS - có màn hình ProMotion, bao gồm iPhone 13 Pro và iPad Pro. Trên các thiết bị này, ứng dụng Flutter có thể hiển thị ở tốc độ quét đạt 120 hz, trước đây bị giới hạn ở 60 hz. Điều này dẫn đến trải nghiệm mượt hơn trong các animation nhanh như cuộn. Hãy xem flutter.dev/go/variable-refresh-rate để biết thêm chi tiết.

2.3 Simplified iOS releases:

Team Flutter đã thêm các tùy chọn mới vào lệnh flutter build ipa để đơn giản hóa việc phát hành ứng dụng iOS của bạn. Khi bạn đã sẵn sàng phân phối (distribute) tới TestFlight hoặc App Store, hãy chạy flutter build ipađể tạo Xcode archive ( .xcarchivefile) và một app bundle ( .ipafile). Bạn có thể tùy chọn thêm —-export-method ad-hoc, —-export-method developmenthoặc —-export-method enterprise. Sau khi app bundle được tạo, hãy upload ứng dụng lên Apple thông qua ứng dụng Apple Transport macOS hoặc trên command line bằng cách sử dụng xcrun altool(run man altoolhướng dẫn xác thực App Store Connect API key). Sau khi upload lên, app của bạn sẽ có sẵn để phát hành cho TestFlight hoặc App Store . Sau khi thiết lập cài đặt dự án Xcode ban đầu của bạn, chẳng hạn như tên hiển thị và biểu tượng ứng dụng, bạn không cần mở Xcode để phát hành ứng dụng của mình nữa.

2.4 Gradle version update:

Nếu bạn tạo một dự án mới bằng công cụ Flutter tool, bạn có thể nhận thấy rằng các file được tạo hiện đang được sử dụng phiên bản mới nhất của các plugin Gradle và Android Gradle. Đối với các dự án hiện có, bạn cần chuyển các phiên bản lên 7.4 cho Gradle và 7.1.2 cho plugin Android Gradle theo cách thủ công.

2.5 Sunsetting 32-bit iOS/iOS 9/iOS 10:

Như team Flutter đã thông báo vào tháng 2 năm 2022 với bản phát hành 2.10, Flutter hỗ trợ cho các thiết bị iOS 32-bit và các phiên bản iOS 9 và 10 sắp hết hạn. Thay đổi này ảnh hưởng đến iPhone 4S, iPhone 5, iPhone 5C và các thiết bị iPad thế hệ thứ 2, 3d và thứ 4. Flutter 3 là bản phát hành ổn định cuối cùng hỗ trợ các phiên bản và thiết bị iOS này.

Để tìm hiểu thêm về thay đổi này, hãy xem RFC: Kết thúc hỗ trợ cho thiết bị iOS 32-bit.

3. Web updates:

Các bản cập nhật của team Flutter cho các ứng dụng web gồm:

3.1 Image decoding:

Flutter web hiện nay tự động phát hiện và sử dụng API ImageDecoder trong các trình duyệt được hỗ trợ. Cho đến hôm nay, hầu hết các trình duyệt dựa trên Chromium (Chrome, Edge, Opera, Samsung Browser, v.v.) đã thêm API này.

API mới này decode hình ảnh bất đồng bộ khỏi main thread mà bằng cách sử dụng image codec tích hợp của trình duyệt. Điều này giúp tăng tốc độ giải mã hình ảnh lên gấp 2 lần và main thread sẽ không bao giờ bị chặn nữa, loại bỏ tất cả các lỗi jank do hình ảnh gây ra trước đó.

3.2 Web app lifecycles:

Vòng đời (lifecycle) API mới của các ứng dụng web Flutter cung cấp cho bạn sự linh hoạt để kiểm soát quá trình khởi động của ứng dụng Flutter từ trang HTML hosting và giúp Lighthouse phân tích hiệu suất của ứng dụng của bạn. Điều này áp dụng cho nhiều trường hợp sử dụng, bao gồm các trường hợp được yêu cầu thường xuyên như sau:

• A splash screen.
• A loading indicator.
• A plain HTML interactive landing page displayed before the Flutter app.

Để biết thêm thông tin, hãy xem Customizing web app initialization trên docs.flutter.dev.

4. Tooling updates:

Các update của team Flutter đối với Flutter tool và Dart bao gồm:

4.1 Cập nhật lint package

Phiên bản 2.0 của các lint package đã được phát hành:

• Flutter: https://pub.dev/packages/flutter_lints/versions/2.0.0
• Dart: https://pub.dev/packages/lints/versions/2.0.0

Các ứng dụng được tạo trong Flutter 3 với flutter createtự động bật bộ lints v2.0. Các ứng dụng, package và plugin hiện có được khuyến khích chuyển sang phiên bản 2.0 để làm theo các phương pháp hay nhất và mới nhất trong thế giới Flutter, bằng cách chạy flutter pub upgrade --major-versions flutter_lints.

Hầu hết các line warning mới được thêm vào v2 đều đi kèm với các bản sửa lỗi tự động. Vì vậy, sau khi nâng cấp lên phiên bản package mới nhất trong pubspec.yaml flie của ứng dụng, bạn có thể chạy dart fix —-applyqua code base của mình để tự động sửa hầu hết các line warning (một số cảnh báo vẫn yêu cầu một số thao tác thủ công). Các ứng dụng, package hoặc plugin chưa được sử dụng package:flutter_lintscó thể di chuyển bằng cách làm theo migration guide.

5. Performance improvements:

Nhờ có knopp - contributor cho Flutter, tính năng repaint một phần đã được kích hoạt trên các thiết bị Android hỗ trợ nó. Tính năng repaint một phần khi có một vùng dirty region hình chữ nhật hiện đã được bật trên cả thiết bị iOS và Android mới hơn.

Team Flutter đã cải thiện hơn nữa hiệu suất của các opacity animation trong các trường hợp đơn giản. Đặc biệt, khi một Opacitywidget chỉ chứa duy nhất một single rendering primitive, thì saveLayer method thường được gọi bởi Opacitysẽ bị bỏ qua.Trong các bản phát hành trong tương lai, team Flutter dự định áp dụng tối ưu hóa này cho nhiều trường hợp hơn nữa.

Nhờ công việc của cộng tác viên open source JsouLiang , các luồng raster và UI của Engine hiện chạy ở mức độ ưu tiên cao hơn trên Android và iOS so với các luồng khác; ví dụ, các collection threads garbage chạy nền Dart VM. Trong các bài test đo lường của team Flutter, điều này dẫn đến thời gian xây dựng frame (frame build times) trung bình nhanh hơn ~ 20% .

5.1 Impeller

Team Flutter đã làm việc chăm chỉ để tìm ra một giải pháp để giải quyết tình trạng jank ở những frame đầu tiên trên iOS  và các nền tảng khác. Trong bản phát hành Flutter 3, bạn có thể xem trước chương trình phụ trợ hiển thị thử nghiệm (experimental rendering) có tên là Impeller trên iOS. Impeller biên dịch trước một bộ đổ bóng nhỏ hơn, đơn giản hơn tại thời điểm xây dựng động cơ để chúng không biên dịch trong khi ứng dụng đang chạy; đây là nguyên nhân chính của jank trong Flutter. Impeller vẫn trong giai đoạn phát triển và còn lâu nữa mới hoàn thành. Không phải tất cả các tính năng của Flutter đều được triển khai, nhưng team Flutter hài lòng với độ trung thực và hiệu suất của nó trong ứng dụng Flutter / gallery mà team Flutter đang chia sẻ tiến trình của mình. Đặc biệt, frame tồi tệ nhất trong animation chuyển tiếp của Gallery app nhanh hơn khoảng 20 lần.

Impeller có sẵn dưới một flag trên iOS. Bạn có thể chuyển —-enable-impellerđến flutter runhoặc đặt FLTEnableImpellerflag trong Info.plistfile của mình thành trueđể dùng thử Impeller. Việc phát triển Impeller vẫn tiếp tục trên kênh chính của Flutter và team Flutter hy vọng sẽ cung cấp thêm thông tin cập nhật trong các bản phát hành trong tương lai.

5.2 Inline ads on android:

Khi sử dụng package google_mobile_ads, bạn sẽ thấy hiệu suất tốt hơn trong các tương tác quan trọng của người dùng như scrolling và transition giữa các trang. Điều này đặc biệt đáng chú ý trên các thiết bị phổ biến ở các thị trường mới nổi. Phần tốt nhất là không cần thay đổi code!

Bên cạnh đó, Flutter giờ đây tổng hợp các chế độ xem Android, thường được gọi là platform view, không đồng bộ. Điều này có nghĩa là luồng raster Flutter không cần đợi chế độ xem Android hiển thị. Thay vào đó, công cụ Flutter đặt chế độ xem trên màn hình bằng cách sử dụng kết cấu OpenGL mà nó quản lý.

6. Các cập nhật khác:

Các cập nhật khác cho hệ sinh thái Flutter bao gồm:

6.1 Material 3:

Flutter 3 hỗ trợ Material Design 3, thế hệ tiếp theo của Material Design. Flutter 3 cung cấp hỗ trợ chọn sử dụng Material 3; điều này bao gồm các tính năng của Material You như dynamic color, hệ thống màu (color system) và kiểu chữ cập nhật, cập nhật cho nhiều thành phần và hiệu ứng hình ảnh mới được giới thiệu trong Android 12 như thiết kế gợn sóng cảm ứng mới và hiệu ứng stretch overscroll.

Hãy thử các tính năng của Material 3 trong ứng dụng mới Take your Flutter app from Boring to Beautiful. Xem tài liệu API để biết chi tiết về cách chọn tham gia các tính năng mới này và những thành phần nào có hỗ trợ cho Material 3. Theo dõi công việc đang diễn ra với sự cố Material 3 Umbrella.

6.2 Theme extensions:

Flutter hiện cho phép thêm bất kỳ thứ gì vào thư viện material ThemeData, với một khái niệm được gọi là Theme extensions. Thay vì mở rộng (theo nghĩa Dart) ThemeDatatriển khai lại nó copyWith, lerpvà các phương thức khác, bạn có thể chỉ định ThemeData.extensions. Ngoài ra, với tư cách là package developer, bạn có thể cung cấp ThemeExtensions. Hãy xem flut.dev/go/theme-extensions để biết thêm chi tiết và xem ví dụ này trên GitHub.

6.3 Ads:

Team Flutter biết rằng điều quan trọng là các publishers phải yêu cầu sự đồng ý đối với quảng cáo được cá nhân hóa và xử lý các yêu cầu về tính minh bạch theo dõi ứng dụng (ATT) của Apple.

Để hỗ trợ các yêu cầu này, Google cung cấp SDK nền tảng nhắn tin người dùng (UMP), thay thế open source Consent SDK trước đó. Trong bản phát hành sắp tới của GMA SDK cho Flutter, team Flutter sẽ thêm hỗ trợ cho UMP SDK để cho phép nhà xuất bản có được sự đồng ý của người dùng. Để biết thêm chi tiết, hãy xem trang google mobile ads trên pub.dev.

7. Breaking changes:

Khi team Flutter tiếp tục phát triển và cải thiện Flutter, team mong muốn giữ số lượng các thay đổi ở phạm vi tối thiểu. Với việc phát hành Flutter 3, team Flutter có những thay đổi đột phá sau:

• API không dùng nữa sẽ bị xóa sau v2.10
• Page transitions được thay thế bởi ZoomPageTransitionsBuilder
• Thuộc tính toggleableActiveColor của ThemeData không được dùng nữa

Nếu bạn đang sử dụng bất kỳ apis nào trong số này, vui lòng tham khảo migration guide trên Flutter.dev.

Tóm lại

Gửi lời cảm ơn đến team Flutter tại Google vì công việc tuyệt vời mà cộng đồng đã làm để giúp Flutter duy trì trạng thái là bộ công cụ giao diện người dùng đa nền tảng (platform UI toolkit) phổ biến nhất, được đo lường bởi các nhà phân tích như Statista và SlashData. Team Flutter mong muốn được làm việc cùng nhau như một cộng đồng để tiếp tục cung cấp một công cụ hướng tới cộng đồng giúp tạo ra trải nghiệm thú vị cho cả developer và người dùng!

Nguồn: https://medium.com/flutter/whats-new-in-flutter-3-8c74a5bc32d0