Chúng ta sẽ học cách loại bỏ context khi navigate trong Flutter nhé.
Navigate là một phần không thể thiếu trong bất kì ứng dụng nào. Flutter sẽ hỗ trợ bạn navigate đến bất cứ màn hình nào một cách dễ dàng hơn chỉ với việc sử dụng các chức năng navigate đơn giản như Push và Pop.
Để Push:
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
Để Pop:
Navigator.pop(context);
Điều này hoạt động khá tốt cho đến khi ứng dụng của bạn mở rộng quy mô và bạn tách logic nghiệp vụ của mình với logic UI. Và bây giờ bạn phải chuyển BuildContext từ một function này sang một function khác. Đôi khi việc này sẽ trở nên rắc rối khiến bạn muốn tránh việc chuyển context.
Đừng lo lắng nhé vì NavigatorKey sẽ giải cứu bạn.
1. Đầu tiên, hãy tạo Navigator Key
static final navigatorKey = GlobalKey<NavigatorState>();
2. Tiếp đến, hãy chuyển Navigator Key trong MaterialApp
return MaterialApp(
...
navigatorKey: AppRouter.navigatorKey,
);
3. Cuối cùng, hãy push bằng Navigator Key
navigatorKey.currentState?.push(
MaterialPageRoute(builder: (_) => SecondRoute()),
);
Vậy là xong, chỉ với 3 bước đơn giản, bạn đã có thể loại bỏ context ra khỏi Navigation của mình. Bạn có thể kiểm tra code đầy đủ trên Github.
Bài viết được tham khảo từ Divyanshu Bhargava.
Chau Le
Cực thích đồ ngọt như sữa, kem. Thích phiêu lưu mạo hiểm nhưng vì Covid mà vô tình trở thành người chia sẻ nội dung lập trình :))
follow me :
Bài viết liên quan
Tự học Dart: Các Dart Operators (toán tử) bạn cần biết
Sep 02, 2023 • 18 min read
Flutter cơ bản: Điều cần biết khi lập trình ứng dụng đầu tiên
Aug 23, 2023 • 13 min read
Dart là gì? Giới thiệu cơ bản về ngôn ngữ lập trình Dart
Aug 21, 2023 • 11 min read
Flutter là gì? Vì sao nên học công cụ lập trình Flutter?
Aug 19, 2023 • 11 min read
Flutter cơ bản: Widget Tree, Element Tree & Render Tree
Aug 19, 2023 • 10 min read
So sánh StatelessWidget và StatefulWidget
Jul 17, 2022 • 12 min read