Flutter Navigation and Routing

Route là gì?

Trong Flutter, Route là một màn hình hoặc trang trong ứng dụng. Khi chúng ta nói về Route, chúng ta đang đề cập đến cách mà ứng dụng di chuyển giữa các màn hình và cách chúng ta xây dựng và quản lý các màn hình này.

Có hai loại Route phổ biến trong Flutter:

MaterialPageRoute

• MaterialPageRoute là một loại route cơ bản trong Flutter, được sử dụng để điều hướng trực tiếp từ một màn hình này sang màn hình khác.

• Khi sử dụng MaterialPageRoute, màn hình mới sẽ được đẩy lên (push) hoặc kéo xuống (pop) với hiệu ứng chuyển đổi mặc định.

Cách sử dụng:

Named Route

• Named Route giúp bạn điều hướng bằng cách sử dụng tên của màn hình thay vì phải khởi tạo từng màn hình mỗi lần. Đây là cách tiếp cận tốt khi ứng dụng có nhiều màn hình và giúp bạn quản lý điều hướng dễ dàng hơn.

• Với Named Route, bạn cần phải khai báo các route trong MaterialApp hoặc CupertinoApp.

Cách sử dụng:

Khai báo các Named Routes:

Điều hướng đến một Named Route:

CupertinoPageRoute

• CupertinoPageRoute là một phiên bản route đặc trưng của iOS, có hiệu ứng chuyển màn hình giống như trên các ứng dụng iOS.

Cách sử dụng:

Navigation là gì?

Navigation trong Flutter là quá trình điều hướng giữa các màn hình trong ứng dụng. Điều này liên quan đến việc sử dụng Navigator để thực hiện các thao tác như mở, đóng, và thay đổi màn hình.

Navigator quản lý một stack (ngăn xếp) các Route và điều khiển việc hiển thị các màn hình (pages) trong ứng dụng.

Các hàm cơ bản trong Navigation:

• Navigator.push(): Mở một màn hình mới và đẩy màn hình đó lên trên stack.

Navigator.pop(): Quay lại màn hình trước đó trong stack. Đây là cách bạn trở về màn hình trước khi sử dụng Navigator.push().

Navigator.pushNamed(): Mở màn hình theo tên route đã định nghĩa. Đây là cách điều hướng sử dụng các named routes thay vì phải tạo MaterialPageRoute mỗi lần.

Navigator.popUntil(): Quay lại một màn hình nào đó trong stack mà bạn chỉ định. Ví dụ, quay lại trang chủ từ bất kỳ đâu trong ứng dụng.

Navigator.pushReplacement(): Thay thế màn hình hiện tại với màn hình mới mà không giữ lại màn hình cũ trong stack.

Navigator.pushAndRemoveUntil(): Mở màn hình mới và xóa tất cả màn hình trước đó trong stack, chỉ giữ lại màn hình mới.

Navigation và State Management

Có thể truyền dữ liệu hoặc trạng thái giữa các màn hình bằng cách sử dụng Navigator.push() với arguments hoặc Navigator.pushNamed().

Trong màn hình nhận,  có thể truy cập arguments như sau:

Ứng dụng vào project Note App

Mục tiêu : Tạo thêm màn hình chi tiết Note

Tạo screen Detail

Dùng push để mở màn hình chi tiết

Kết quả :

Bài viết khác

Kanban

1. Kanban là gì? Kanban là một phương pháp quản lý công việc trực quan, giúp bạn theo dõi tiến độ từng nhiệm vụ. Kanban bắt nguồn từ Nhật Bản, ban đầu được Toyota dùng để quản lý dây chuyền sản xuất, nhưng ngày nay được áp dụng rộng rãi trong các lĩnh vực như […]

Đọc thêm

Scum

1. Scrum là gì? Scrum là một khung làm việc (framework) giúp các nhóm làm việc cùng nhau để phát triển sản phẩm một cách linh hoạt và hiệu quả. Nó thuộc phương pháp Agile – đề cao sự thích nghi, cộng tác và cải tiến liên tục trong quá trình làm việc. 2. Các […]

Đọc thêm

So sánh Realm, Hive, Sqflite, và Drift

So sánh Tiêu chí Realm Hive Sqflite Drift Mức độ phổ biến Tăng nhanh (Meta hỗ trợ) Rất phổ biến Rất phổ biến Trung bình (cộng đồng ổn định) Dễ sử dụng, dễ tích hợp Trung bình (cần setup Realm SDK) ★ Rất dễ (NoSQL, không cần SQL) Trung bình (phải viết SQL tay) Trung […]

Đọc thêm

Testing

I. Testing là gì? Testing (kiểm thử phần mềm) là quá trình đánh giá một hệ thống phần mềm để xác định xem sản phẩm có đáp ứng các yêu cầu được đặt ra hay không, và nhằm phát hiện lỗi nếu có. Testing là một phần quan trọng trong vòng đời phát triển phần […]

Đọc thêm

Application security

Ứng dụng bảo mật là gì? Application Security (Bảo mật ứng dụng) là quá trình bảo vệ ứng dụng khỏi các lỗ hổng và tấn công từ các mối đe dọa bên ngoài. Quá trình này bao gồm các biện pháp bảo vệ trong suốt vòng đời phát triển phần mềm (SDLC): từ thiết kế, […]

Đọc thêm

MVC/MVP

1. Giới thiệu chung Trong phát triển phần mềm, việc tổ chức mã theo mô hình kiến trúc rõ ràng là rất quan trọng để dễ dàng bảo trì, mở rộng và kiểm thử. Hai mô hình phổ biến trong phát triển ứng dụng là: MVC (Model – View – Controller) MVP (Model – View […]

Đọc thêm