Flutter: Điều hướng các màn hình (Navigation trong Flutter – Phần 2)

Như trong bài viết trước về Navigator trong Flutter, chúng ta đã tìm hiểu cách sử dụng của hai phương thức cơ bản nhất để điều hướng màn hình trong ứng dụng đó là Navigator.push và Navigator.pop (Link bài viết). Ở bài viết lần nay, sẽ giúp  các bạn biết thêm cách dùng của một phương thức khác của Navigator, giống với push đó là Nagvigator.pushNamed.

Khái niệm

Tương tự push thì pushNamed cũng là một cách để ta chuyển tới một màn hình mới trong ứng dụng của mình. Khác với push ở chỗ nõ sẽ nhận vào hai tham số đó là  (BuildContext, String). Ở đây “String” chính là tên định danh của một route(màn hình). Hiểu đơn giản thì ta cần khai báo tên định danh cho các route và dùng nó để điều hướng qua lại các màn hình. Để dễ hiểu hơn thì cùng xem ví dụ sau đây nhé.

Khai báo tên định danh Route

Ta sẽ sử dụng onGenerateRoute để khai báo tên định danh cho các route mà mình sử dụng.

Khai báo tên định danh Route

Sử dụng Navigator.pushNamed

 Việc đơn giản chúng ta cần làm bây giờ để chuyển màn hình đó là gọi phương pushNamed ra bên trong hàm onTap ở màn hình đầu tiên

Cách sử dụng Navigator.pushNamed

Quản lý Route

Chắc chắn trong ứng dụng sẽ có rất nhiều màn hình, đồng nghĩa với việc bạn sẽ phải khai báo rất nhiều tên định danh cho chúng. Sau đây là sẽ một cách để bạn quản lý toàn bộ route, thuận tiện cho việc sử dụng trong ứng dụng của mình.

Ta sẽ tạo một class tên AppRoutes

Tạo AppRoutes

Tất cả route sẽ được khai báo ở đây cùng với tên định danh của chúng, thay vì trong MaterialApp như ở trên.

Tiếp theo ta sẽ thêm routes ở file main

Thêm routes ở “main”

Dùng Navigator.pushNamed và truyền tên được khai báo vào trong phương thức để thực hiện chuyển từ màn hình đầu qua màn thứ hai như sau

Cách sử dụng AppRoutes để điều hướng

Truyền dữ liệu

Để chuyển màn hình đồng thời truyền dữ liệu sang màn hình đó, ta sẽ sử dụng tham số arguments.

Bước 1: tạo class Arguments gồm các thuộc tính mà mình muốn truyền

Ví dụ ở đây tôi tạo đối tượng có hai thuộc tính là tên và tuổi.

Tạo đối tượng Arguments

Truyền nó thông qua arguments:

Truyền dữ liệu thông qua arguments

Ở màn tiếp theo ta sẽ hứng dữ diệu mà màn hình trước đó truyền qua bằng cách sử dụng hàm ModelRoute.of(context).setting.argument.

Cách nhận dữ liệu từ arguments

Nhận dữ liệu trả về từ Navigator.pop

Để quay về màn hình trước đó thì ta sẽ sử dụng Navigator.pop, đồng thời nếu muốn gửi dữ liệu trả về thì làm như sau:

Cách truyền arguments bằng Navigator.pop

Thêm phần dữ liệu trả về sau tham số context.

Ở màn hình trước đó dữ liệu được nhận thông qua.

Cách nhận dữ liệu

Kết

Trên đây là hướng dẫn chi tiết cách sử dụng Navigator.pushNamed và truyền nhận dữ liệu. Navigator là công cụ cơ bản nhất giúp điều hướng màn hình trong ứng dụng Flutter. Ngoài ra, còn có các package hỗ trợ chúng ta thực hiện việc chuyển màn hình này, thì ở bài viết sau chúng ta sẽ tìm hiểu chúng.