Flutter: Liên kết sâu

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Lưu ý: Tính năng này chỉ khả dụng trên kênh phát triển (dev) hoặc kênh chính (master). Để tìm hiểu cách chuyển kênh, hãy xem Chuyển kênh trong Flutter.

Flutter hỗ trợ liên kết sâu trên iOS, Android và các trình duyệt web trong kênh phát triển. Mở một URL sẽ hiển thị màn hình đó trong ứng dụng của bạn. Với các bước sau, bạn có thể khởi chạy và hiển thị các định tuyến (route) bằng cách sử dụng các route đã đặt tên (có tham số routes hoặc onGenerateRoute) hoặc bằng cách sử dụng widget Router.

Ghi chú phiên bản: Navigator 2.0 hiện được gọi là Router, cho phép bạn thiết lập khai báo các route được hiển thị dựa trên trạng thái hiện tại của ứng dụng. API này được chọn tham gia.

Nếu bạn đang chạy ứng dụng trong trình duyệt web, thì không cần thiết lập bổ sung. Đường dẫn route được xử lý theo cách tương tự như liên kết sâu iOS hoặc Android. Theo mặc định, các ứng dụng web đọc đường dẫn liên kết sâu từ phân đoạn url sử dụng mẫu: /#/path/to/app/screen.

Để làm theo, bạn hãy tạo một dự án Flutter mới với Mẫu widget Router trong flutter/samples.

Bật liên kết sâu trên Android

Thêm thẻ siêu dữ liệu và intent filter vào AndroidManifest.xml bên trong thẻ <activity> với tên ".MainActivity":

<!-- Deep linking -->
<meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="http" android:host="flutterbooksample.com" />
    <data android:scheme="https" />
</intent-filter>

Sau đó bạn cần phải khởi động lại toàn bộ để áp dụng những thay đổi này.

Thử nghiệm trên trình giả lập Android

Để kiểm tra với trình giả lập Android, hãy cung cấp lệnh adb một intent trong đó tên máy chủ khớp với tên được xác định trong AndroidManifest.xml:

adb shell am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d "http://flutterbooksample.com/book/1"

Để biết thêm chi tiết, hãy xem tài liệu Xác minh Liên kết ứng dụng Android trong tài liệu Android.

Bật liên kết sâu trên iOS

Thêm hai khóa mới vào Info.plist trong thư mục ios/Runner:

<key>FlutterDeepLinkingEnabled</key>
<true/>
<key>CFBundleURLTypes</key>
<array>
    <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>flutterbooksample.com</string>
    <key>CFBundleURLSchemes</key>
    <array>
    <string>customscheme</string>
    </array>
    </dict>
</array>

CFBundleURLName là một URL duy nhất dùng để phân biệt ứng dụng của bạn từ những người khác sử dụng chương trình tương tự. Lược đồ (customscheme://) cũng có thể là duy nhất.

Bạn cần phải khởi động lại toàn bộ để áp dụng những thay đổi này.

Thử nghiệm trên trình giả lập iOS

Sử dụng lệnh xcrun để kiểm tra trên trình mô phỏng iOS:

xcrun simctl openurl booted customscheme://flutterbooksample.com/book/1

Migrate liên kết sâu dựa trên plugin

Nếu bạn đã viết một plugin để xử lý các liên kết sâu, như được mô tả trong “Ứng dụng liên kết sâu và Flutter”, nó sẽ tiếp tục hoạt động cho đến khi bạn chọn tham gia vào hành vi này bằng cách thêm FlutterDeepLinkingEnabled vào Info.plist hoặc flutter_deeplinking_enabled vào AndroidManifest.xml tương ứng.

Hành vi

Hành vi thay đổi đôi chút dựa trên nền tảng và liệu ứng dụng có được khởi chạy và chạy hay không.

Nền tảng / Kịch bản Sử dụng Navigator Sử dụng Router
iOS (chưa khởi chạy) Ứng dụng có InitialRoute (“/”) và một thời gian ngắn sau nhận được pushRoute Ứng dụng nhận được InitialRoute (“/”) và một thời gian ngắn sau khi sử dụng RouteInformationParser để phân tích cú pháp route và gọi RouterDelegate.setNewRoutePath, cấu hình Navigator với Trang tương ứng.
Android - (chưa khởi chạy) Ứng dụng nhận được InitialRoute chứa route (“/deeplink”) Ứng dụng nhận InitialRoute (“/deeplink”) và chuyển nó đến RouteInformationParser để phân tích cú pháp route và gọi RouterDelegate.setNewRoutePath, cấu hình Navigator với các Trang tương ứng.
iOS (đã khởi chạy) pushRoute được gọi Đường dẫn được phân tích cú pháp và Navigator được định cấu hình với một nhóm Trang mới.
Android (đã khởi chạy) pushRoute được gọi Đường dẫn được phân tích cú pháp và Navigator được định cấu hình với một nhóm Trang mới.

Sau khi nâng cấp lên widget Router, ứng dụng của bạn có khả năng thay thế nhóm trang hiện tại khi một liên kết sâu mới được mở trong khi ứng dụng đang chạy.

Nguồn: flutter.dev
» Tiếp: Giới thiệu về Hoạt ảnh (Animation)
« Trước: Tìm hiểu hệ thống điều hướng và định tuyến mới của Flutter
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!