GetX Flutter – Route Management với GetX (Phần 3)

GetX trong flutter
Lập trình Lập trình Flutter

GetX Flutter – Route Management với GetX (Phần 3)

1. Định tuyến không sử dụng tên route

Định tuyến dễ dàng hơn với GetX. Chúng ta cần thay MaterialApp thành GetMaterialApp ở main.dart

GetMaterialApp( // Before: MaterialApp(
  home: MyHome(),
)

Để chuyển đến một trang mới chúng ta sử dụng phương thức sau:

Get.to(NextScreen());

Đóng snackbars, dialogs, bottomsheets, hay bất cứ thứ gì có thể đóng bằng Navigator.pop(context) thì trong GetX chúng ta sử dụng cú pháp:

Get.back();

Điều hướng đến trang mới và không cho quay về trang hiện tại (Thường được sử dụng cho SplashScreen, Login,..):

Get.off(NextScreen());

Đến trang mới và xóa hết các trang cũ:

Get.offAll(NextScreen());

Đến trang mới và nhận dữ liệu trả về từ trang đó ngay khi back về trang hiện tại:

var data = await Get.to(Payment());

Trả dữ liệu về trang trước theo cú pháp:

Get.back(result: 'success');

2. Định tuyến sử dụng tên route

Đối với chuyển trang bằng tên thì cũng tương tự các hàm trên nhưng có thêm hậu tố Named như: toNamed, offNamed, offAllNamed, …

void main() {
  runApp(
    GetMaterialApp(
      unknownRoute: GetPage(name: '/notfound', page: () => UnknownRoutePage()),
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => MyHomePage()),
        GetPage(name: '/second', page: () => Second()),
      ],
    )
  );
}

3. Truyền dữ liệu cho trang mới

3.1 Truyền dữ liệu với arguments:

Get.toNamed("/NextScreen", arguments: 'Get is the best');
print(Get.arguments);
 //print out: Get is the best

3.2 Dynamic urls links

Dynamic urls khá quen thuộc đối với Web Developer. GetX hỗ trợ nó cho Flutter. Ta có thể sử dụng theo syntax thuộc tính:

Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo");
print(Get.parameters['id']);
// out: 354
print(Get.parameters['name']);
// out: Enzo

Hoặc có thể sử dụng theo cấu trúc định sẵn như ví dụ bên dưới:

GetPage(
        name: '/profile/:user',
        page: () => UserProfile(),
      ),

Gửi dữ liệu với route được định nghĩa ở trên.

Get.toNamed("/profile/34954");

Nhận dữ liệu tương tự như ở trên.

print(Get.parameters['user']);
// out: 3495

Xem thêm: Ví dụ sử dụng GetX trong Flutter để quản lý state

Leave your thought here

Your email address will not be published. Required fields are marked *

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Wishlist 0
Open wishlist page Continue shopping