Hướng Dẫn Điều Hướng trong Flutter với GoRouter

GoRouter là một package nổi bật trong Flutter, giúp bạn dễ dàng khai báo Routing. Nó dựa trên Navigator 2.0 API, và rất hữu ích cho các nhà phát triển muốn tạo ra trải nghiệm điều hướng mượt mà hơn. Nếu bạn đã quen với Navigator 1.0, có lẽ bạn đã biết đến khái niệm push, tức là thêm một route vào Navigation Stack.

Với GoRouter, bạn sẽ có hai sự lựa chọn chính để điều hướng:

• Đi theo (Go) một route
• Đẩy (Push) một route

Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về sự khác biệt giữa hai phương thức này và cách chọn lựa phù hợp cho từng trường hợp.

Cách Khai Báo GoRouter

Để sử dụng GoRouter, bạn có thể khai báo như sau:

GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomeScreen(),
      routes: [
        GoRoute(
          path: 'detail',
          builder: (context, state) => const DetailScreen(),
        ),
        GoRoute(
          path: 'modal',
          pageBuilder: (context, state) => const MaterialPage(
            fullscreenDialog: true,
            child: ModalScreen(),
          ),
        )
      ],
    ),
  ],
)

Đoạn mã trên định nghĩa ba trang cho Routing: HomeScreen, DetailScreen và ModalScreen.

Điều Hướng giữa Các Màn Hình từ Top Route

Khi bạn đang ở HomeScreen, có thể có 3 nút với các phương thức điều hướng khác nhau:

// Callback cho nút đầu tiên
context.go('/detail'),
// Callback cho nút thứ hai
context.push('/detail'),
// Callback cho nút thứ ba
context.go('/modal'),

Trong trường hợp này, callback thứ nhất và thứ hai đều điều hướng tới /detail và hoạt động tương đương:

Kết quả: Cả hai đều điều hướng theo thứ tự: Home → Detail.

Khám Phá Sự Khác Biệt giữa Go và Push

Giờ đây, chúng ta sẽ đi đến điểm quan trọng trong bài viết này.

Từ trang Detail, bạn có thể điều hướng tới /modal bằng hai cách:

// onPressed callback cho nút đầu tiên
context.go('/modal'),
// onPressed callback cho nút thứ hai
context.push('/modal'),

Kết quả sẽ là:

• Sử dụng context.go('/modal') sẽ hiển thị Modal page bên trên Home page
• Sử dụng context.push('/modal') sẽ hiển thị Modal page bên trên Detail page

Điều này xảy ra là vì phương thức go sẽ chuyển đến route mục tiêu (/modal) bằng cách loại bỏ route trước đó (/detail), trong khi đó push sẽ luôn thêm route mục tiêu vào trên cùng của navigation stack hiện có.

Nguyên Tắc Điều Hướng

Khi bạn thoát khỏi Modal page:

• Nếu bạn sử dụng go, bạn sẽ trở lại Home page.
• Nếu bạn sử dụng push, bạn sẽ trở lại Detail page.

Kết Luận

Hiểu rõ cách sử dụng go và push là rất quan trọng để tạo ra trải nghiệm điều hướng hợp lý trong ứng dụng của bạn. Hãy lựa chọn phương thức Điều Hướng phù hợp với mục đích sử dụng nhé!

Nguồn tham khảo: codewithandrea.com
source: viblo