Hướng dẫn cài đặt và xử lý dữ liệu từ Deep Link trên Flutter
Trong bài viết này, chúng ta sẽ tìm hiểu cách cài đặt một dịch vụ Deep Link trong ứng dụng Flutter của bạn để có thể nhận và xử lý dữ liệu từ các liên kết sâu (deep link). Việc này sẽ giúp tăng cường trải nghiệm người dùng và tối ưu hóa khả năng điều hướng trong ứng dụng.
1. Giới thiệu về Deep Link
Deep link là một loại URL mà khi được nhấp vào, sẽ dẫn người dùng đến một trang cụ thể trong ứng dụng của bạn thay vì chỉ mở ứng dụng. Điều này rất hữu ích để tạo ra các trải nghiệm liền mạch khi người dùng truy cập từ các nguồn khác nhau như email, mạng xã hội, hoặc trang web.
2. Cài đặt dịch vụ Deep Link
Chúng ta sẽ tạo một lớp dịch vụ có tên DeepLinkServices, và lớp này sẽ dùng GetXController để quản lý trạng thái. Dưới đây là cấu trúc của lớp đó:
dart
class DeepLinkServices extends GetxController {
DeepLinkServices._privateConstructor();
static final DeepLinkServices _instance =
DeepLinkServices._privateConstructor();
static DeepLinkServices get instance => _instance;
Uri? get initialLink => _initialLink;
Uri? _initialLink;
StreamSubscription<Uri>? _linkSubscription;
bool _isInitialAppLinkHandled = false;
@override
void onInit() {
super.onInit();
initialize();
}
Future<void> initRoute() async {
final appLinks = AppLinks();
_initialLink = await appLinks.getInitialLink();
}
Future<void> initialize() async {
final appLinks = AppLinks();
Logger.i('[Deep Link]: initialize');
// Kiểm tra liên kết ban đầu nếu ứng dụng ở trạng thái lạnh (đã tắt)
if (!_isInitialAppLinkHandled) {
_initialLink = await appLinks.getInitialLink();
if (_initialLink != null) {
_isInitialAppLinkHandled = true;
_handleLinkData(_initialLink!);
}
}
// Xử lý liên kết khi ứng dụng ở trạng thái ấm (nền hoặc foreground)
_linkSubscription = appLinks.uriLinkStream.listen(
_handleLinkData,
onError: (err) {
Logger.e('[Deep Link]: Fail $err');
},
onDone: () {
_linkSubscription?.cancel();
},
);
}
@override
void onClose() {
_linkSubscription?.cancel();
super.onClose();
}
/// Xử lý việc điều hướng với các Deep Links.
void _handleLinkData(Uri uri) {
Logger.i('[Deep Link] Handler: $uri');
// Phân tích URI và điều hướng dựa trên đường dẫn
final parsedPath = _parsePath(uri);
if (parsedPath != null) {
_handleNavigation(parsedPath);
}
}
/// Phân tích đường dẫn URI để xác định loại và ID
Map<String, String>? _parsePath(Uri uri) {
if (uri.pathSegments.isNotEmpty) {
if (uri.pathSegments[0] == 'product') {
return {
'type': 'product',
'id': uri.pathSegments.last,
} ;
} else if (uri.pathSegments[0] == 'user') {
return { 'type': 'user', 'id': uri.pathSegments.last };
}
}
return null;
}
/// Điều hướng dựa trên đường dẫn đã phân tích
void _handleNavigation(Map<String, String> parsedPath) {
final type = parsedPath['type'];
final id = parsedPath['id'];
Logger.e('[Deep Link] type: $type = id: $id');
if (type == 'product' && id != null) {
navigatorKey.currentState?.context.navigateTo(
RoutePath.requestProductScreen,
routeSettings: RouteSettings(
arguments: ProductInviteArgument(int.parse(id)),
)
);
} else if (type == 'user' && id != null) {
// Điều hướng đến màn hình người dùng
final userModel = UserModel(userId: int.tryParse(id));
navigatorKey.currentState?.context.navigateTo(
RoutePath.userDetailScreen,
routeSettings: RouteSettings(
arguments: UserDetailArgument(userModel),
),
);
} else {
Logger.e('[Deep Link] Unknown path: $type');
}
}
}3. Khởi tạo dịch vụ trong main.dart
Để khởi tạo dịch vụ này, bạn chỉ cần thêm dòng lệnh sau trong hàm khởi động của ứng dụng:
dart
await DeepLinkServices.instance.initRoute();Vậy là bạn đã hoàn tất cài đặt để nhận và xử lý dữ liệu từ các liên kết sâu trong ứng dụng Flutter của bạn. Bây giờ, bạn có thể tùy chỉnh thêm mã nguồn trong dịch vụ này để điều hướng đến các trang mình mong muốn.
source: viblo
