, January 27, 2022

0 kết quả được tìm thấy

Làm thế nào để chuyển màn hình mà không cần context trong Flutter?

  • Đăng bởi  Chau Le
  •  Dec 07, 2021

  •   1 min read
Làm thế nào để chuyển màn hình mà không cần context trong Flutter?

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.

Bài viết liên quan

Sử dụng SQLite trong Flutter

SQLite là một trong những cách phổ biến nhất để lưu trữ dữ liệu cục bộ....

Sử dụng SQLite trong Flutter
Flutter 2.8 có gì mới?

Cải tiến về hiệu suất, các tính năng Firebase mới, WebView 3.0, desktop status, cập nhật công cụ và hơn thế nữa sẽ xuất hiện trong bản phát hành mới nhất!...

Flutter 2.8 có gì mới?
Dart 2.15 có gì mới?

Ở bài viết này, chúng ta sẽ cùng nhau tìm hiểu chi tiết những tính năng vừa mới được cập nhật thêm ở phiên bản Dart 2.15. Cùng xem thử để xem có tính năng nào mà bạn đang "mong chờ" từ lâu đối với ngôn ngữ Dart hay không 😄....

Dart 2.15 có gì mới?
Download source code Flutter Home Feed mạng xã hội từ 200lab

Mạng xã hội là một app rất phổ biến vì chúng ta đang dùng chúng hằng ngày. Trong lần chia sẻ này, 200Lab sẽ gởi tặng các bạn source code Flutter cho phần Home Feed của Social Network App...

Download source code Flutter Home Feed mạng xã hội từ 200lab
Flutter vs React Native vs Native: So sánh chi tiết hiệu năng

Hãy so sánh hiệu năng FPS, CPU, Memory và GPU của các công cụ phát triển thiết bị di động phổ biến....

Flutter vs React Native vs Native: So sánh chi tiết hiệu năng
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.