Khám phá công nghệ

Khám phá các công cụ và kỹ thuật hữu ich cho Lập trình viên

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

Thắng Nguyễn

Sat, 30 Nov 2024

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

0 Comments

Để lại một bình luận