[Flutter] Flutter 2.5 có gì mới
Giới thiệu
Google, gã khổng lồ tìm kiếm mới đây vừa tung ra phiên bản release 2.5 với 4600 closed issues và 3932 merged PRs. Đi kèm với nó, Dart 2.14 cũng được release cùng thời điểm. Trong bài viết này, mình sẽ cùng xem có gì mới trong lần release này nhé.
Cải thiện hiệu năng
1. Giảm mức độ giật (jank), tiêu thụ ít CPU và điện năng hơn trên IOS.
Một trong những lý do gây ra giật lag bởi bộ thu dọn rác GC (garbage collector) dừng UI thread lại để lấy lại memory. Trong bản release này, việc thu hồi bộ nhớ cho các hình ảnh không được sử dụng một cách nhanh chóng, làm giảm đáng kể sự giật lag
2. Giảm độ trễ khi truyền message giữa Dart và Objective-C/Swift (iOS) hay Java/Kotlin
Việc điều chỉnh message channel, xoá các bản sao không cần thiết khỏi codec message làm giảm độ trễ lên đến 50% tuỳ thuộc vào thiết bị và kích thước message
Cập nhật Dart 2.14
Bản release này đi kèm với Dart 2.14. Bên dưới là những thay đổi, cập nhật mới:
- Hỗ trợ Apple Sillicon
- Tối ưu dart formatter với cascades
- Pub hỗ trợ ignore file sử dụng
.pubignore - Pub nhanh & thông minh hơn
- Xây dựng bộ lint tiêu chuẩn cho các dự án Dart & Flutter
- Thêm toán tử triple shift huyền thoại (
>>>)
Một số breaking changes:
- Dừng support ECMAScript5
- Deprecated dartfmt & dart2native commands
- Deprecated the Dart VM’s Native Extensions
Chi tiết hơn về Dart 2.14, bạn có thể theo dõi tại đây
Cập nhật Framework
1. Android fullscreen support
Flutter đã khắc phục một loạt các vấn đề liên quan đến chế độ toàn màn hình. Tên của các chế độ mới này là một trong những tính năng mới được yêu thích:
- Lean back
- Sticky
- Sticky immersive
- Edge to edge
Ngoài ra, còn hỗ trợ lắng ngha thay đổi trên toàn hình trong các chế độ khác nhau.
2. Cập nhật kích thước Floating Button
Cho phép config size Floating button với 4 kích thước small, regular, large, extended.
Ngoài ra, thêm trạng thái MaterialState.scrolledUnder trong SliverAppBar
1
2
3
4
5
6
7
8
9
10
11
12
SliverAppBar(
backwardsCompatibility: false,
elevation: 0,
backgroundColor: MaterialStateColor.resolveWith((Set<MaterialState> states) {
return states.contains(MaterialState.scrolledUnder) ? Colors.indigo : Colors.blue;
}),
expandedHeight: 160,
pinned: true,
flexibleSpace: const FlexibleSpaceBar(
title: Text('SliverAppBar'),
),
),
3. Scroll metrics
Một vài cải tiến khác liên quan đến scroll:
#85221 , 85499 thông báo về khu vực có thể scroll ngay cả khi người dùng không scroll.
Ví dụ bên dưới cho thấy thanh cuộn ẩn/hiện thích hợp dựa trên kích thước của listview
4. ScaffoldMessenger banner
Nếu phiên bản Flutter 2.0 cho phép hiển thị Snackbars ở dưới cùng màn hình cung cấp thông báo cho người dùng thì ở phiên bản 2.5, chúng ta có thêm banner ở trên cùng màn hình.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: const Text('The MaterialBanner is below'),
),
body: Center(
child: ElevatedButton(
child: const Text('Show MaterialBanner'),
onPressed: () => ScaffoldMessenger.of(context).showMaterialBanner(
MaterialBanner(
content: const Text('Hello, I am a Material Banner'),
leading: const Icon(Icons.info),
backgroundColor: Colors.yellow,
actions: [
TextButton(
child: const Text('Dismiss'),
onPressed: () => ScaffoldMessenger.of(context)
.hideCurrentMaterialBanner(),
),
],
),
),
),
),
);
}
Cập nhật một số deprecated plugin & feature mới
Cập nhật một số tính năng mới cho Camera & Image picker plugin
Ngoài ra, một số package không còn được bảo trì nữa nên chúng không còn được đánh dấu là plugin yêu thích của flutter. Nếu bạn muốn sử dụng cập nhật mới nhất, hãy chuyển sang phiên bản plus của các plugin sau:
Flutter Dev tools
- Bổ sung một số cải tiến cho phép theo dõi sự thay đổi frame cụ thể, giúp xác định tại sao frame bị over.
- Giao diện inspect trực quan hơn với màu tương ứng
Tools
Nếu bạn đã quen với counter app, ứng dụng thần thánh khi khởi tạo 1 template flutter thì giờ bạn có thể sử dụng 1 template mới với nhiều tính năng và tổng quan hơn.
- Sử dụng ChangeNotifier để control widget
- Localizations với arb
- Ảnh mẫu với các kích thước 1x, 2x, 3x tương ứng cho từng thiết bị
- Hỗ trợ shared_preferences
- Hỗ trợ theme sáng/tối
- Hỗ trợ navigation giữa các trang
Chi tiết bạn có thể xem ở PRs này nhé : Skeleton Template
Để tạo template mới sử dụng câu lệnh sau:
1
$ flutter create -t skeleton my_app
Pigeon
Nếu bạn đang phát triển 1 plugin, có thể bạn sẽ quan tâm đến phiên bản phát hành 1.0 Pigeon.
Pigeon là một tool codegen để xây dựng code tương tác an toàn giữa Flutter và nền tảng máy chủ của nó. Nó cho phép bạn định nghĩa API và generate skeleton code cho Dart, Java/Kotlin, Objective-C/Swift
Breaking changes & deprecations
Bên dưới là một số breaking changes trong phiên bản 2.5
- Default drag scrolling devices
- Deprecated API removed after v2.2
- Introducing package:flutter_lints
- ThemeData’s accent properties have been deprecated
- GestureRecognizer Cleanup
- Replace AnimationSheetBuilder.display with collate
- Using HTML slots to render platform views in the web
- Migrate LogicalKeySet to SingleActivator
Để xem đầy đủ những thay đổi, truy cập trang chủ để biết thêm chi tiết nhé: flutter.dev
Tổng kết
Chúc các bạn coding vui vẻ!