Giới Thiệu Về GoRouter

GoRouter là một gói định tuyến mạnh mẽ và linh hoạt dành cho Flutter, được phát triển bởi nhóm Flutter. Nó giúp việc điều hướng trong các ứng dụng Flutter trở nên dễ dàng hơn bằng cách cung cấp một cách đơn giản và khai báo để định nghĩa các tuyến đường và xử lý điều hướng. Khác với Navigator mặc định của Flutter (có thể hơi phức tạp cho người mới), GoRouter sử dụng cách tiếp cận dựa trên URL, tương tự như cách hoạt động của các trang web, giúp cho việc điều hướng trở nên trực quan và mở rộng dễ dàng.

Tại Sao Nên Sử Dụng GoRouter?

• Cú Pháp Đơn Giản: GoRouter cho phép bạn định nghĩa các tuyến đường bằng mã dễ hiểu.
• Điều Hướng Dựa Trên URL: Nó hỗ trợ các URL giống như web (ví dụ: /home hoặc /profile/123), rất tuyệt cho các ứng dụng web và liên kết sâu.
• Tuyến Đường Lồng Ghép: Bạn có thể tạo điều hướng lồng ghép (như tab hoặc subtabs) dễ dàng.
• Hỗ Trợ Tham Số: Truyền dữ liệu như ID (ví dụ: /product/42) trực tiếp trong URL.
• Chuyển Hướng: Xử lý logic điều hướng, như chuyển hướng người dùng đến trang đăng nhập nếu họ chưa đăng nhập.
• Thân Thiện Với Người Mới: Nó giảm độ phức tạp trong việc quản lý ngăn điều hướng.

Cài Đặt GoRouter

Hãy cùng tìm hiểu cách cài đặt và sử dụng GoRouter trong một ứng dụng Flutter. Chúng ta sẽ tạo một ứng dụng đơn giản với hai màn hình: màn hình chính và màn hình hồ sơ.

Bước 1: Thêm GoRouter Vào Dự Án

Đầu tiên, bạn cần thêm gói go_router vào dự án Flutter của mình. Mở tệp pubspec.yaml và thêm phụ thuộc sau:

dependencies:
  go_router: ^16.2.1

Sau đó, chạy flutter pub get trong terminal của bạn để cài đặt gói. (Lưu ý: Số phiên bản có thể thay đổi, vì vậy hãy kiểm tra pub.dev để biết phiên bản mới nhất.)

Bước 2: Tạo Các Màn Hình

Chúng ta sẽ tạo hai màn hình đơn giản cho ứng dụng của mình: HomeScreen và ProfileScreen.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Chào mừng bạn đến với màn hình chính!'),
            ElevatedButton(
              onPressed: () {
                // Chúng ta sẽ điều hướng đến màn hình hồ sơ sau
              },
              child: const Text('Đi đến Hồ Sơ'),
            ),
          ],
        ),
      ),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  final String? userId; // Tham số tùy chọn cho ID người dùng
  const ProfileScreen({super.key, this.userId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hồ Sơ')),
      body: Center(
        child: Text('Màn hình Hồ Sơ${userId != null ? ' cho Người Dùng $userId' : ''}'),
      ),
    );
  }
}

Bước 3: Cấu Hình GoRouter

Bây giờ, hãy cấu hình GoRouter để xử lý điều hướng giữa các màn hình này. Trong tệp main.dart, hãy thiết lập router và định nghĩa các tuyến đường.

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'home_screen.dart';
import 'profile_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  // Định nghĩa cấu hình GoRouter
  final GoRouter _router = GoRouter(
    routes: [
      GoRoute(
        path: '/', // Tuyến đường gốc (màn hình chính)
        builder: (context, state) => const HomeScreen(),
      ),
      GoRoute(
        path: '/profile/:userId', // Tuyến đường hồ sơ với tham số
        builder: (context, state) {
          final userId = state.pathParameters['userId'];
          return ProfileScreen(userId: userId);
        },
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Demo GoRouter Flutter',
      routerConfig: _router, // Sử dụng GoRouter cho điều hướng
    );
  }
}

Giải Thích Mã

• Cấu Hình GoRouter: Chúng ta tạo một phiên bản GoRouter và định nghĩa hai tuyến đường:
  • /: Tuyến đường gốc, hiển thị HomeScreen.
  • /profile/:userId: Một tuyến đường cho ProfileScreen với tham số userId động (ví dụ, /profile/123).
• MaterialApp.router: Thay vì sử dụng MaterialApp thông thường, chúng ta sử dụng MaterialApp.router để tích hợp GoRouter.
• Tham Số Đường Dẫn: :userId trong /profile/:userId cho phép chúng ta truyền dữ liệu động, như ID người dùng, đến ProfileScreen.

Bước 4: Thêm Điều Hướng

Chúng ta sẽ cập nhật HomeScreen để điều hướng đến ProfileScreen khi nút được nhấn. Sửa đổi ElevatedButton trong HomeScreen:

ElevatedButton(
  onPressed: () {
    context.go('/profile/123'); // Điều hướng đến Hồ Sơ với userId 123
  },
  child: const Text('Đi đến Hồ Sơ'),
)

Ở đây, context.go('/profile/123') thông báo cho GoRouter điều hướng đến tuyến đường /profile/123, truyền 123 làm userId.

Bước 5: Chạy Ứng Dụng

Chạy ứng dụng của bạn bằng flutter run. Bạn sẽ thấy:

• Màn hình chính với một nút.
• Nhấp vào nút sẽ đưa bạn đến màn hình Hồ Sơ, hiển thị “Màn hình Hồ Sơ cho Người Dùng 123”.

Các Tính Năng Chính Của GoRouter Dành Cho Người Mới

1. Điều Hướng Giữa Các Màn Hình

Sử dụng context.go() để điều hướng đến một tuyến đường mới. Ví dụ:

context.go('/profile/456'); // Điều hướng đến ProfileScreen với userId 456

2. Quay Lại

Để quay lại màn hình trước đó, sử dụng:

context.pop();

Thêm một nút quay lại vào thân của ProfileScreen:

ElevatedButton(
  onPressed: () {
    context.pop();
  },
  child: const Text('Quay Lại'),
)

3. Truyền Tham Số

Bạn đã thấy cách truyền userId trong tuyến đường (/profile/:userId). Bạn có thể truy cập nó trong builder bằng state.pathParameters['userId'].

4. Tuyến Đường Lồng Ghép

Nếu ứng dụng của bạn có điều hướng lồng ghép (ví dụ, một bảng điều khiển với các tab), bạn có thể định nghĩa các tuyến đường con. Ví dụ:

GoRoute(
  path: '/dashboard',
  builder: (context, state) => const DashboardScreen(),
  routes: [
    GoRoute(
      path: 'settings',
      builder: (context, state) => const SettingsScreen(),
    ),
  ],
)

Bây giờ, /dashboard/settings sẽ hiển thị SettingsScreen như một tuyến đường con của DashboardScreen.

5. Chuyển Hướng

Bạn có thể chuyển hướng người dùng dựa trên các điều kiện, như gửi họ đến một trang đăng nhập nếu họ chưa xác thực:

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomeScreen(),
    ),
  ],
  redirect: (context, state) {
    bool isLoggedIn = false; // Thay thế bằng logic xác thực của bạn
    if (!isLoggedIn && state.uri.toString() != '/login') {
      return '/login';
    }
    return null; // Không chuyển hướng
  },
);

Mẹo Cho Người Mới

• Bắt Đầu Đơn Giản: Bắt đầu với các tuyến đường cơ bản như chúng ta đã làm ở trên trước khi khám phá các tuyến đường lồng ghép hoặc chuyển hướng.
• Sử Dụng Đường Dẫn Miêu Tả: Làm cho các đường dẫn của bạn rõ ràng, như /home hoặc /profile, để giữ cho mã của bạn dễ đọc.
• Kiểm Tra Điều Hướng: Luôn kiểm tra các tuyến đường của bạn để đảm bảo chúng hoạt động như mong đợi, đặc biệt khi truyền các tham số.
• Đọc Tài Liệu: Tài liệu GoRouter rất thân thiện với người mới và có nhiều ví dụ hơn.

Hãy thử nghiệm với nhiều tuyến đường hơn hoặc thêm các chuyển hướng để cải thiện ứng dụng của bạn. Chúc bạn lập trình vui vẻ!