State Management trong flutter

State Management trong flutter

Rate this post

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 Navigator.pop để định nghĩa quy trình làm việc của một ứng dụng.

  1. 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:

State Management trong flutter
  1. 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

State Management trong flutter
  1. Navigation.pop

Navigation.pop được dùng để điều hướng lại màn hình trước đó

State Management trong flutter

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

State Management trong flutter

Thay đổi tất cả các code mặc định trong file main.dart bằng code sau

State Management trong flutter

Tạo lớp Product để quản lý thông tin sản phẩm

State Management trong flutter

Ta tạo một hàm getProducts bên trong lớp Product để tạo ra các dữ liệu giả.

State Management trong flutter

Tạo widget RatingBox để hiển thị tổng quan đánh giá của sản phẩm

State Management trong flutter
State Management trong flutter
State Management trong flutter

Tạo một widget ProductBox để hoạt động chung với lớp Product

State Management trong flutter

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

State Management trong flutter

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

State Management trong flutter

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

State Management trong flutter
State Management trong flutter

Leave a Reply