Package AutoRoute Phần 2

Phần 1, mình đã tìm cách setup để sử dụng package Auto_Route. Phần này mình sẽ đi tìm hiểu cách di chuyển giữa các Page cơ bản.

1. Tạo Các Route

• Bài trước mình đã tạo PageA, bây giờ mình sẽ tạo thêm các PageB, PageC, PageD, PageE… để thực hiện demo. Cách tạo Route mình đã trình bày Phần 1. Nên sẽ không nhắc lại.

• Sau đó khai báo các Route tại class AppRouter cho các Page vừa tạo.

  class PathRouter {
    static const String pageA = "/pageA";
    static const String pageB = "/pageB";
    static const String pageC = "/pageC";
    static const String pageD = "/pageD";
    static const String pageE = "/pageE";
    static const String pageF = "/pageF";
    static const String pageG = "/pageG";
  }
  

  @AutoRouterConfig()
  class AppRouter extends _$AppRouter {
    @override
    List<AutoRoute> get routes => [
          AutoRoute(
            // Chỉ định Page sẽ hiển thị đầu tiên
            initial: true, 
            path: PathRouter.pageA,
            page: RouteA.page,
          ),
          AutoRoute(
            path: PathRouter.pageB,
            page: RouteB.page,
          ),
          AutoRoute(
            path: PathRouter.pageC,
            page: RouteC.page,
          ),
          AutoRoute(
            path: PathRouter.pageD,
            page: RouteD.page,
          ),
          AutoRoute(
            path: PathRouter.pageE,
            page: RouteE.page,
          ),
          AutoRoute(
            path: PathRouter.pageF,
            page: RouteF.page,
          ),
          AutoRoute(
            path: PathRouter.pageG,
            page: RouteG.page,
          ),
        ];
  }
  

• Lưu ý : Thứ tự các đặt các Auto tại getter không xác định thứ tự mà các Page hiển thị trên App.

2. Di chuyển sang Page B

• Tại Page A, chúng ta tạo một button NextPage, khi nhấn nó App sẽ thực hiện di chuyển sang Page B

  ElevatedButton(
    child: const Text('Next Page B'),
    onPressed: () {
      // Lấy instance của AutoRoute.
      var autoRouter = AutoRouter.of(context);
  
      // Cách 1:  Dùng hàm push
      autoRouter.push(const RouteB());
  
      // Cách 2: Dùng hàm pushNamed
      autoRouter.pushNamed(PathRouter.pageB);
    },
  )
  

• Tại Page B, Nếu muốn trở về Page A thì chúng ta sử dụng hàm pop. Hãy xem đoạn code dưới đây

  ElevatedButton(
    child: const Text('Back Page A'),
    onPressed: () {
      var autoRouter = AutoRouter.of(context);
      autoRouter.pop();
    },
  )
  

• Mình sẽ thực hiện Push thêm nhiều Page cho đến khi được cấu trúc như sau :

  A -> B -> C -> D -> E -> F -> G
  

• Lúc này, App đang đứng tại PageG, mình muốn trở về page đầu tiên là Page A với method popUntilRoot()

  ElevatedButton(
    child: const Text('Back To Root'),
    onPressed: () {
      var autoRouter = AutoRouter.of(context);
      // hàm popUntilRoot hỗ trợ trở về page Root
      autoRouter.popUntilRoot();
    },
  )
  

• Một trường hợp khác. App cũng đang đứng tại PageG. nhưng mình muốn trở về PageC (PageC không phải là Root không thể dùng hàm popUntilRoot()). Chúng ta có thể dùng các hàm dưới đây.

  ElevatedButton(
    child: const Text('Back To PageC'),
    onPressed: () {
      var autoRouter = AutoRouter.of(context);
      //cách 1:
      autoRouter.popUntilRouteWithPath(PathRouter.pageC);
  
      //cách 1:
      autoRouter
          .popUntil((route) => route.settings.name == RouteC.name);
  
      //cách 3:
      autoRouter.popUntilRouteWithName(RouteC.name);
    },
  ),
  

• OK, đến lúc này chúng ta đã có thể di chuyển được các Page một cách cơ bản nhất. Mình có demo tại đây.

NEXT : Phần tiếp theo, mình sẽ tìm hiểu cách truyền data giữa các màn hình.

NOTE : Bài viết dựa trên quá trình tự học tập, nếu có điều gì sát sót, mọi đóng góp là một điều tuyệt với với mình