Flutter là một framework mã nguồn mở được phát triển và hỗ trợ bởi Google. Hiện nay, phần mềm thường được các Front-end và Fullstack Developer sử dụng để xây dựng giao diện người dùng (UI) cho các ứng dụng trên nhiều nền tảng với một cơ sở mã duy nhất. Bộ tính năng, sửa lỗi và cải tiến hiệu suất không ngừng phát triển, Flutter luôn mang đến cho các developer các công cụ mới nhất theo mong muốn của họ.

Và cải tiến mới nhất trong phiên bản Flutter 3.10 đã chứng minh điều đó. Hãy cùng tìm hiểu ngay sau đây nhé!

1. Framework

Flutter 3.10 đã giới thiệu một vài cải tiến cho Flutter Framework giúp cải thiện khả năng thiết kế giao diện UI của bạn. 

Thư viện Material 3 

Thư viện Material hiện đã khớp với Material Design spec mới nhất. Các thay đổi bao gồm: các component mới và chủ đề component, update lại visual của component, . . bạn cần phải “opt-in” vào những thay đổi này bằng cách sử dụng theme flag useMaterial3. Trong “the next stable release”, useMaterial3 mặc định là true

Để sử dụng phiên bản M3 của thư viện Material, hãy cài đặt useMaterial3: true trong theme MaterialApp của bạn. Lệnh flutter create sẽ thêm vào theme khi bạn tạo một theme mới. 

Để xem trước những thay đổi này, hãy xem tại demo app. Bản demo cho phép bạn bật và tắt useMaterial3. 

ColorScheme.fromImageProvider()

Tất cả các component trong M3 được định cấu hình màu mặc định của theme ColorScheme. Bảng màu mặc định sử dụng các sắc thái của màu tím. Bạn hoàn toàn có thể tạo một bảng màu tùy chỉnh từ một màu nào đó hoặc từ một hình ảnh bất kỳ.

NavigationBar

Bản phát hành này mang đến một phiên bản mới của widget BottomNavigationBar. Để ghi đè giao diện mặc định của widget NavigationBars, hãy sử dụng widget NavigationBarTheme.  Mặc dù bạn không cần di chuyển các ứng dụng hiện có sang component này, nhưng bạn nên sử dụng nó cho các ứng dụng mới.

NavigationDrawer

Cập nhật mới cung cấp các widget lựa chọn điểm đến M3, dựa trên widget Drawer widget. NavigationDrawer hiển thị sự lựa chọn danh sách độc lập của widget NavigationDestinations. Bạn có thể bao gồm các widget khác trong danh sách này. Bạn cũng có thể cuộn NavigationDrawer khi cần thiết. Để override giao diện mặc định của widget NavigationDrawers, hãy sử dụng widget NavigationDrawerTheme

SearchBar và SearchAnchor

Các Component này sẽ dự đoán cho các truy vấn tìm kiếm. Khi người dùng nhập truy vấn tìm kiếm, ứng dụng sẽ tính toán danh sách các câu trả lời phù hợp trong "search view". Người dùng chọn một hoặc điều chỉnh truy vấn. Để override thiết kế M3 của các component này, hãy sử dụng widget SearchBarTheme và SearchAnchorTheme

Secondary Tab Bar

M3 cho phép bạn tạo bậc thứ hai của nội dung theo tab. Để phân biệt bậc này, sử dụng TabBar.secondary

Cập nhật DatePicker và TimePicker

DatePicker đã được cập nhật lại màu sắc, layout, shape cho cả calendar và textfield của widget. Cập nhật này không thay đổi API, nhưng thêm một tệp mới là DatePickerTheme

Giống như DatePicker, TimePicker cũng được cập nhật màu sắc, layout và shape cho cả phiên bản thông thường và nhỏ gọn của widget.

Cập nhật BottomSheet 

Bên cạnh được cập nhật màu sắc và shape thì Bottom Sheet hiện còn có thêm handle drag khi bạn thiết lập showDragHandle thành true.

TextField

Các bản cập nhật mới cho phép người dùng CupertinoSearchTextField chọn tắt tính năng autocorrect learning trên bàn phím. Ngoài ra, thay đổi mới còn bổ sung hỗ trợ thêm IconButtonTheme cho các bộ trang trí input và màu con trỏ TextField phù hợp với thông số kỹ thuật của M2 và M3. TextField hiện đã hỗ trợ kiểu văn bản disabled input.

M3 còn hỗ trợ native gesture cho các widget TextField, cho phép người dùng thực hiện các hành động như nhấp đúp hoặc nhấp ba lần bằng chuột, tương đương với việc chạm hai lần hoặc chạm ba lần trên thiết bị cảm ứng. Tính năng này được tích hợp theo mặc định vào các widget TextField và CupertinoTextField . Để biết thêm thông tin chi tiết bạn có thể tham khảo Triple tap/ click gesture và Double tap and drag.

Bên cạnh đó, ListTile và Drawer cũng được update.

2. Hỗ trợ ngôn ngữ lập trình Dart 3 trong Flutter 3.10

Phiên bản mới chính thức giới thiệu Dart 3, một bản phát hành chính của ngôn ngữ lập trình cung cấp thêm công suất cho Flutter. Bản cập nhật này mang lại những cải tiến đáng kể bằng cách loại bỏ non-null-safe code, đảm bảo trải nghiệm liền mạch và được bảo vệ bằng ngôn ngữ hoàn toàn an toàn này, không có những rủi ro thông thường của ngôn ngữ nullable.

Dart 3 cũng mang đến các cải tiến về ngôn ngữ, bao gồm cả việc giới thiệu các Patterns. Tính năng này giúp đơn giản hóa việc làm việc với dữ liệu có cấu trúc, cho phép các hàm trả về đồng thời nhiều giá trị một cách thuận tiện, loại bỏ nhu cầu về các collections hoặc các class chuyên dụng.

Hơn nữa, câu lệnh chuyển đổi được cập nhật cho phép giải cấu trúc có trật tự các patterns, trong khi các công cụ sửa đổi class mới như interface class và sealed class cung cấp các khả năng mở rộng.

3. Hỗ trợ framework cho SLSA và Bảo mật 

Bảo vệ phần mềm khỏi các mối đe dọa và các cuộc tấn công là một trong những nhiệm vụ quan trọng đối với mọi developer. Cải tiến bảo mật framework Flutter cung cấp trải nghiệm an toàn hàng đầu với SLSA Cấp 1. Điều này dẫn đến việc triển khai nhiều tính năng bao gồm: 

• Flutter Build Script:

Flutter Build Script cho phép build tự động trên các nền tảng đáng tin cậy. Điều này giúp ngăn chặn giả mạo, cải thiện an ninh chuỗi cung ứng.

• Được sự chấp thuận của nhiều bên

Quá trình của việc release trên Flutter đã được tăng cường với sự kiểm duyệt của nhiều engineer, và có thể kiểm tra bản ghi nhật ký để ngăn chặn những thay đổi trái phép giữa mã nguồn và artifact generation. Những cập nhật này đảm bảo tính toàn vẹn của code và nâng cao tính minh bạch trong quá trình release.

• Nguồn gốc

Các bản phát hành ổn định và beta của Flutter hiện bao gồm thông tin xuất xứ, đảm bảo rằng các tạo phẩm phát hành framework được build từ các nguồn đáng tin cậy với nội dung được kiểm soát. Nguồn gốc links được dùng để xác minh trên kho lưu trữ SDK, tăng thêm tính minh bạch và độ tin cậy cho quy trình phát hành.

4. Impeller Engine

Flutter 3.10 đã giới thiệu Impeller làm công cụ render mặc định trên iOS. Điều này mang lại những cải tiến đáng kể cho hiệu suất và trải nghiệm hình ảnh. Impeller thay thế Skia và giải quyết các sự cố mà biên dịch shader gây ra, làm cho các animation có chất lượng kém. 

Bằng cách sử dụng thuật toán tessname, Impeller bỏ qua nhu cầu biên dịch shader trong quá trình render, làm cho animation mượt mà hơn và hiển thị hình dạng và màu sắc liền mạch hơn. 

Bản cập nhật mới nhất bao gồm phiên bản preview của Impeller dành cho Android, mở rộng khả năng hiển thị vượt trội của nó cho các ứng dụng Flutter trên thiết bị hệ điều hành này. Với công cụ mạnh mẽ như vậy, các ứng dụng Flutter được thiết lập để mang lại hiệu suất vượt trội trên cả nền tảng Android và iOS.

Lợi ích khi sử dụng Impeller:

• Sử dụng ít lượt render hơn, giúp cải thiện tốc độ render. 

• Giảm sử dụng bộ nhớ, từ đó cải thiện việc sử dụng băng thông và tăng cường load ứng dụng.

• Đảm bảo rằng kích thước của ứng dụng luôn được giữ ở mức thấp. 

5. Web Integration trong Flutter

Cải tiến trong Flutter cho web chủ yếu tập trung vào một số yếu tố chính bao gồm thời gian load, khả năng truy cập và khả năng tương tác. Bản phát hành Flutter 3.10 có một số cải tiến khác như sau:

• Giảm kích thước của CanvasKit: 

Kích thước của CanvasKit đã được giảm xuống, do đó, trình duyệt dựa trên chromium giờ đây có thể sử dụng “flavor” CanvasKit trên tùy chỉnh nhỏ hơn. Điều này làm giảm thời gian load cho framework, cải thiện hiệu suất ứng dụng.

• Giảm kích thước của icon và phông chữ

Icon và phông chữ nhỏ hơn giúp cải thiện tốc độ của ứng dụng web Flutter. 

•  Mở rộng hỗ trợ embedded nội dung Flutter

Bạn có thể embedded nội dung Flutter vào trang web HTML chỉ bằng cách sử dụng tag iframe . Điều này cho phép các developer có thể sử dụng nội dung Flutter bằng nội dung CSS.

• Tùy chỉnh Shader

Phiên bản mới này còn giúp tùy chỉnh các Shader, giúp nâng cao hiệu ứng đồ họa trong ứng dụng. 

6. Mobile apps: Android and iOS

Bản phát hành mới mang đến một danh sách các tính năng thú vị mới cho các nhà phát triển ứng dụng dành cho thiết bị di động, bao gồm:

• Wireless debug cho ứng dụng iOS:

Giờ đây, bạn có thể thực hiện wireless debug trong ứng dụng Flutter iOS của mình sau khi ghép nối thiết bị iOS trong Xcode. Ngoài ra, còn có hỗ trợ cho Variable Refresh Rate (tốc độ làm tươi), thay đổi sẽ cải thiện chất lượng animation và hình ảnh trong khi cuộn trang trên iPhone và iPad. 

• Hỗ trợ kiểm tra chính tả trong iOS 

Widget SpellCheckConfiguration() hỗ trợ kiểm tra chính tả của Apple trên iOS. Bạn có thể sử dụng nó với SpellCheckConfiguration trong CupertinoTextField.

• Hỗ trợ camera Android

Camera Android hỗ trợ thêm các chức năng phong phú cho các ứng dụng Android. Bổ sung thêm hỗ trợ sơ bộ cho thư viện CameraX Jetpack, bao gồm chụp ảnh, quay video và hiển thị các bản xem trước live camera.  

• Hỗ trợ thiết bị di động có thể gập lại

Phiên bản này cho phép các developer mang đến cho người dùng trải nghiệm mượt mà hơn với thiết kế đẹp mắt, kết hợp hình ảnh quyến rũ, tiện ích và một loạt tính năng thú vị cho các thiết bị có thể gập lại.

Ngoài ra, bản phát hành này còn cải tiến API, bao gồm: APNG Decoder, việc loading image bằng API.

VietnamWorks inTECH