Flutter Utils

Hi, lại là mình đây!

Vừa rồi mình có sharing 1 buổi cùng với team dev về Flutter (link). Cho bạn nào lỡ nhấn vào link và thấy chỉ có 1 slide thôi thì mời các bạn quay lại bài viết này nhé.

Trong đấy là những key note về những utils hay trong Flutter, có thể bạn đã sử dụng hoặc chưa vì đây là bài tổng hợp, hãy cùng mình tìm hiểu nhé.

Routing:

Mặc định thì tư duy của router được built-in trong Flutter đã rất ngon rồi. Xử lý như future, dễ dàng handle, kiểm soát được router state, deeplinking. Tuy nhiên, từ phiên bản 2.8 thì các thành viên của Flutter dev team đã đưa ra 1 package mới có tên là Go Router. Bỏ qua mấy cái như tại sao lại phát triển nó dưới dạng package mà không phải built-in, … thì mình cùng tìm hiểu điểm mạnh của thư viện này trên Passio App là gì nhé.

Features:

  • Parsing path and query parameters using a template syntax (for example, “user/:id’)
  • Displaying multiple screens for a destination (sub-routes)
  • Redirection support – you can re-route the user to a different URL based on application state, for example to a sign-in when the user is not authenticated
  • Support for multiple Navigators via ShellRoute – you can display an inner Navigator that displays its own pages based on the matched route. For example, to display a BottomNavigationBar that stays visible at the bottom of the screen
  • Support for both Material and Cupertino apps
  • Backwards-compatibility with Navigator API
https://pub.dev/packages/go_router

Các tính năng này đặc biệt hay và Passio App đã triển khai làm cho việc điều hướng trở nên dễ dàng, không bị rối. Việc xử lý routing trên app cũng không thủ công nữa.

Completer:

Tôi phải công nhận đây là một feature hay tuy nhiên lại ít được sử dụng trong Passio App. Tính năng này là gì?

A way to produce Future objects and to complete them later with a value or error.

Flutter Completer: https://api.flutter.dev/flutter/dart-async/Completer-class.html

Đây là một xử lý bất đồng bộ, cho phép khởi tạo 1 đối tượng future ở 1 nơi và complete hoặc reject nó ở 1 nơi khác. Lấy ví dụ như ở luồng preview thông tin link (được sử dụng ở TAP). Khi người dùng nhập vào 1 link vào form ở giao diện, sau đó submit form sẽ gửi lên các thông tin open graph (title, desciption) để AI có thể tạo content dựa vào link vừa nhập.

Isolate:

Một cơ chế rất mạnh khác của Flutter, chuyên để xử lý các tác vụ nặng (upload ảnh dung lượng cao, video, …), đòi hỏi nhiều phần cứng nhưng và đảm bảo giao diện chính không bị block. Lúc này, xử lý sẽ được chuyển vào 1 luồng riêng biệt gọi là Isolate. Không chia sẻ state, chỉ giao tiếp với UI chính thông qua message. Luồng này hoàn toàn có thể kết hợp với Completer xử lý và handle mà không làm block đến UI chính.

InheritedWidget & InheritedNotifier:

Hai widget này thì lại rất phổ biến trên Passio App. Cần để thông báo (noti) cho các widget con trong widget tree khi có thay đổi state. Tương tự, chúng ta có 1 cặp khác là ValueNotifier + ValueListenableBuilder.

Cache manger & cache network image:

Một feature khác từ package từ bên thứ Cached Network Image. Dựa vào Cache manager, chúng ta có thể chủ động invalid cache từ image ở 1 luồng xử lý khác để cập nhật lại ảnh đúng mà không phải phụ thuộc hoàn toàn vào dữ liệu trả ra.

Cụ thể, màn hình account, avatar được hiển thị từ api /me. Api này không thật sự trả về 1 giá trị khác sau khi người dùng thay đổi ảnh đại diện, thư viện không thể invalid ảnh ban đầu sau khi thay đổi ảnh mới. Cache manager sẽ giúp xử lý chỗ này như sau.

  • Khởi tạo cache manager (cm) và truyền vào widget hiển thị ảnh đại diện.
  • Người dùng chỉnh sửa ảnh và bắn ra callback (bước này có thể thay đổi bằng cách truyền cm vào màn hình chỉnh sửa)
  • Sau khi upload ảnh thành công, gọi lại callback và xử lý cho cm được invalid.

Còn tiếp….

Trên đây là một số tổng hợp của mình về các Flutter Utils, còn rất nhiều và sẽ được cập nhật tiếp. Hãy dành thời gian để tìm hiểu những cái mới để áp dụng vào dự án Passio App của mình nhé. Cảm ơn các bạn đã dành thời gian đọc bài viết này.

Related Posts