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

Như các bạn đã biết, trong một ứng dụng mobie sẽ bao gồm nhiều màn hình, mỗi màn hiển thị các dữ liệu riêng. Và tất nhiên, để tạo ra một ứng dụng đẹp và mượt mà thì việc điều hướng các màn hình là rất quan trọng. Bạn có thắc mắc làm sao, làm cách nào để thực hiện nó không? Trong bài viết này, chúng ta sẽ cùng nhau khám phá Navigator trong Flutter – một công cụ mạnh mẽ giúp bạn quản lý và điều hướng các màn hình trong ứng dụng của mình một cách dễ dàng.

1. Khái niệm

Đầu tiên, chúng ta sẽ tìm hiểu về hai khái niệm cơ bản là Route và Navigator

• Route: Route đại diện cho một màn hình cụ thể trong ứng dụng. Nó có thể là widget được xây dựng và hiển thị trên màn hình, và chứa nội dung và logic riêng của màn hình đó. Ví dụ: màn hình chính, màn hình chi tiết, …
• Navigator: Navigator là một công cụ mà Flutter cung cấp giúp quản lý và điều hướng giữa các màn hình trong ứng dụng. Nó cho phép bạn thực hiện các hành động như chuyển đổi, xếp chồng các màn hình và quản lý lịch sử điều hướng.

→ Tóm lại, route là một màn hình cụ thể trong ứng dụng, còn navigator là công cụ để bạn chuyển đổi qua lại các route(màn hình).

2. Các phương thức điều hướng

Navigator cung cấp cho chúng ta rất nhiều phương thức để điều hướng. Trong đó, cơ bản nhất chính là Navigator.push() và Navigator.pop(). Khi thực hiện phương thức push là bạn đang thêm một route vào trên cùng của stack chứa toàn bộ routes của Navigator, ngược lại pop là loại bỏ route hiện tại ra khỏi stack. Hiểu một cách đơn giản thì push là chuyển tới màn hình mới, còn pop là quay lại màn hình trước đó. Nào cùng bắt đầu để học cách sử dụng chúng nhé. Trước hết, tôi sẽ tạo ra hai màn hình ví dụ là màn đầu tiên để hiện thị danh sách, màn thứ hai chứa thông tin chi tiết.

Màn hình thứ nhất với hàm onTap để chuyển qua màn thứ hai:

Màn hình 1

Màn thứ hai với nút bấm quay lại màn hình trước đó:

Màn hình 2

3. Cách sử dụng Navigator

• Cách sử dụng Navigator.push

Như đã nói ở trên thì để sử dụng push ta cần có route. Vậy làm cách nào để tạo ra route? Chúng ta có thể sử dụng MaterialPageRoute để tạo ra một route cùng với animation chuyển màn. Thực hiện thêm phương thức Navigator.push vào trong hàm onTap ở màn.

Cách sử dụng Navigator.push

Nó sẽ nhận vào hai tham số đó là (BuildContext, Route<T>)

• Cách sử dụng Navigator.pop

Sau khi chuyển đến được màn hình thứ hai, phương thức pop có thể giúp chúng ta trở về màn hình trước đó. Về bản chất pop chính là loại bỏ route hiện tại ra khỏi stack chứa toàn bộ routes của Navigator. Nên việc thực hiện đơn giản chỉ là gọi câu lệnh Navigator.pop() ở trong hàm onTap của nút Back.

Cách sử dụng Navigator.pop

Ngoài hai phương thức kể trên, còn có một số phương thức khác của Navigator giúp chúng ta thực hiện việc điều hướng như:

• pushReplacement: Phương thức này cho phép chuyển tới một màn hình mới và thay thế màn hình hiện tại trong stack chứa routes bằng màn hình mới đó.
• popUntil: Phương thức này giúp bạn quay lại một màn hình cụ thể, và loại bỏ hết route trong stack trước đó.
• pushNamed: Phương thức này cho phép chuyển đến một màn hình mới bằng cách chỉ định một đường dẫn được đăng ký trong ‘routes’ của “MaterialApp”

Ví dụ:

Ví dụ về khác về navigator

• popAndPushNamed: phương thức kết hợp giữa pop và pushNamed, nghĩa là quay lại màn trước đó và chuyển tới một màn hình được chỉ định.

4.Truyền dữ liệu trong Navigator

Nếu bạn đã biết cách điều hướng màn hình bằng Navigator trong Flutter. Thế hãy cùng tìm hiểu cách sử dụng nó để có thể truyền dữ liệu qua lại giữa hai màn hình nha. Như trong ví dụ ở trên, tôi đã có màn hình hiện Danh sách và màn hình Thông tin nhân viên sau khi click vào một ô nhân viên.

Trước hết ta cần tạo 1 class chứa thông tin nhân viên ví dụ tên và tuổi:

Tạo 1 list các nhân viên:

Hiển thị danh sách nhân viên dưới dạng ListView:

Màn hình để xem thông tin:

Để thực hiện truyền dữ liệu từ màn 1 qua màn 2 ta sẽ đưa dữ liệu vào trong phương thức push nằm trong hàm onTap ở màn hình Danh sách.

Qua bài này ta có thể thấy Navigator là một công cụ tiện lợi và dễ dàng sử dụng giúp chúng ta quản lý màn hình trong ứng dụng đồng thời tạo cảm giác tốt hơn cho người dùng. Nhưng trên đây chỉ là điều hướng ở mức cơ bản, ở bài viết sau chúng ta sẽ đi sâu hơn vào từng phương thức và cách custom nó. Tùy vào yêu cầu cụ thể bạn có thể lựa chọn phương án phù hợp nhất nhé.