Quản lý trạng thái trong ứng dụng là một trong những quy trình quan trọng và cần thiết nhất trong vòng đời của ứng dụng.
Các bài viết liên quan:
Giới thiệu về state Management
Chúng ta hãy cùng xem qua ứng dụng về giỏ hàng đơn giản sau đây:
Người dùng sẽ đăng nhập vào ứng dụng với thông tin của họ.
Một khi người dùng đã đăng nhập, hệ thống sẽ hiển thị chi tiết thông tin đăng nhập của họ lên màn hình.
Sau khi người dùng chọn sản phẩm và lưu vào trong giỏ hàng thì thông tin giỏ hàng sẽ tồn tại giữa các trang cho đến khi người dùng kiểm tra giỏ hàng
Thông tin người dùng và giỏ hàng của họ ở thời điểm nào thì sẽ gọi trạng thái của ứng dụng tại thời điểm đó
Quản lý trạng thái có thể được chia làm hai loại dựa trên thời gian mà trạng thái đó tồn tại trong ứng dụng:
Ephemral – tồn tại trong vài giây như trạng thái hiện tại của một animation hoặc một trang như đánh giá của sản phẩm. Flutter hỗ trợ nó thông qua widget StatefulWidget.
app state – tồn tại trong cả hệ thống như thông tin đăng nhập của người dùng, thông tin của giỏ hàng,v.v… Flutter hỗ trợ nó thông qua scoped_model.
Điều hướng và định tuyến
Trong bất cứ ứng dụng nào, điều hướng (Navigation) từ một trang/màn hình đến một trang khác được định nghĩa là một quy trình làm việc của ứng dụng. Cách mà một ứng dụng xử lý điều hướng được gọi là định tuyến (Routing). Flutter cung cấp một lớp định tuyến cơ bản là MaterialPageRoute và hai phương thức là Navigator.push và Navigator.pop để định nghĩa quy trình làm việc của một ứng dụng.
- MaterialPageRoute
MaterialPageRoute là một widget được sử dụng để render UI của nó bằng cách chèn cả màn hình bằng một animation dành riêng cho nền tảng đó.
Sau đây là cách code đơn giản nhất để sử dụng lớp này, builder sẽ chấp nhận một hàm để xây dựng chính nội dụng của nó bằng việc cung cấp context hiện tại của ứng dụng:
- Navigation.push
Navigation.push được dùng để điều hướng đến một màn hình mới sử dụng widget MaterialPageRoute
- Navigation.pop
Navigation.pop được dùng để điều hướng lại màn hình trước đó
Ta hãy cùng tạo một ứng dụng mới để hiểu rõ hơn về khái niệm điều hướng này nhé
Tạo một ví dụ ứng dụng Flutter State Management
Sao chép thư mục assets từ project cũ qua project mới tạo này và thêm assets vào trong file pubspec.yaml
Thay đổi tất cả các code mặc định trong file main.dart bằng code sau
Tạo lớp Product để quản lý thông tin sản phẩm
Ta tạo một hàm getProducts bên trong lớp Product để tạo ra các dữ liệu giả.
Tạo widget RatingBox để hiển thị tổng quan đánh giá của sản phẩm
Tạo một widget ProductBox để hoạt động chung với lớp Product
Ta chỉnh sửa lại widget MyHomePage với một danh sách các sản phẩm với ListView
Sau đó ta tạo một lớp ProductPage sử dụng MaterialPageRoute để điều hướng sang trang chi tiết sản phẩm
Ta chạy ứng dụng và chọn một trong các sản phẩm. Nó sẽ hiện ra một trang chi tiết sản phẩm. Chúng ta có thể bấm quay về trang chính bằng nút ‘back’. Trang danh sách sản phẩm và trang chi tiết sản phẩm nên hiển thị như hình dưới đây
