Deep dive into Flutter deep linking

Master Deep Linking in Flutter: Enhance your application's user experience with our comprehensive step-by-step guide

Transcript

1. Flutter & Dart Deep dive into Flutter deep linking
2. Samuel Abada - Snr Mobile Engineer, Shuttlers Mobility - Co-Organizer, Flutter Lagos - Random chef
3. Deep links? Perhaps not too deep. Deep links Section 01
4. Imagine a world where every tap on your smartphone effortlessly transports you to the exact content you crave, instantly unlocking a world of personalized experiences. Whether seamlessly transitioning from an email to a specific product page, smoothly launching a ride-sharing app with a destination pre-filled, or effortlessly sharing content across apps, deep linking is the secret sauce that makes it all possible. Introduction Section 01
5. Deep links send users directly to an app instead of a store or website. They are used to send users to specific locations in an app or display specific content to the user Deep links Section 01 scheme://host/path https://hepwinglabs.xyz/product
6. Universal Links: Exclusive to ios devices only and uses http and https as their scheme. App Links: Exclusive to android devices only and uses http and https as their scheme. Custom Schemes: Utilize unique url schemes specific to your app. E.g. myapp:// Deep links Section 01
7. Recommendations for the best experience Recommended practices Section 02
8. Since they have similar url to web links, users would be redirected to the web if app cannot open. They are more specific and secure as you verify domain ownership - That your app is associated with the domain. Better UX More Security App links/Universal links Section 02
9. Improve in-app signups, activations and user retention. Include target parameters to create a personalized app experience. Verifying data, adding items to cart, interacting with other users. They can be used in marketing emails, QR codes, referrals, sms, onboarding etc… More traffic translates to more in app purchases, more checkouts, more sales. Personalized app experience Increase traffic On average, deep link experience drives up conversion rates. Users directed to apps are more likely to perform actions compared to users directed to web content. Drive engagement 03 04 05 Section 02
10. There is no authorization required hence anyone can claim any scheme and can direct traffic to apps other than yours. Someone who clicks on a deeplink without having your app gets an error page. Easy to set up and might be a good solution where your website and app do not have a one on one match. Less secure Suitable for apps where routes don’t align with web Custom scheme Section 02
11. Setup deep links How to set up deep links Section 03
12. A web domain hosts web files where this file could be a apple-app-site-assciation file for ios devices and/or a assetlinks.json for android devices. This part focuses on redirecting users from your website to installed app on devices. Involves making neccessary changes to the application. Making android and ios parameter changes. Making changes to dart/flutter code. App Setup Web Setup Section 03
13. Android hosted file on web https://domainName/.well-known /assetslinks.json
14. assetlinks.json [ { "relation": [ "delegate_permission/common.handle_all_urls" ], "target": { "namespace": "android_app", "package_name": "xyz.hephwinglabs.deepa", "sha256_cert_fingerprints": [ "54:5E:D8:C3:75:23:63:D3:26:37:ED:E3:98:C7:29:7F:25:27:64:80:B1:00:A7:7E:04:48:DE:33:75:1B:1E: 82" ] } } ]
15. iOS hosted file on web https://domainName/.well-known /apple-app-site-association
16. apple-app-site-association { "applinks": { "apps": [], "details": [ { "appID": "FMPBR7824H.xyz.hephwinglabs.deepa", "paths": [ "*" ] } ] } }
17. Android App Setup
18. AndroidManifest.xml <meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
19. AndroidManifest.xml <intent-filter android:autoVerify="true" android:label="httpDeepLink"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:host="hephwinglabs.xyz" /> <data android:scheme="http" /> <data android:scheme="https" /> </intent-filter>
20. AndroidManifest.xml <intent-filter android:autoVerify="true" android:label="customSchemeDeepLink"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="deepa" android:host="hephwinglabs.xyz" /> </intent-filter>
21. iOS App Setup
25. Navigation/Routing
26. Router API/Navigation 2.0
27. router.dart final routemaster = RoutemasterDelegate( routesBuilder: (context) { final state = Provider.of<AppState>(context); developer.log('State: ${state.isLoggedIn}', name: 'State Change'); return RouteMap( onUnknownRoute: (_) => const Redirect('/404'), routes: { homeViewRoute: (_) => const CupertinoTabPage( child: HomePage(), paths: ['/product', '/search', '/orders', '/support', '/profile'], ), productViewRoute: (_) => const MaterialPage(child: ProductListing()), }, ); }, );
28. route.dart const String homeViewRoute = '/'; const String productViewRoute = '/product'; const String productDetailsViewRoute = '/product/:id'; const String ordersViewRoute = '/orders'; const String supportViewRoute = '/support'; const String profileViewRoute = '/profile'; const String searchViewRoute = '/search'; const String notFoundViewRoute = '/404'; const String noAuthViewRoute = '/no-auth';
29. main.dart MaterialApp.router( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: ThemeData( // colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), routerDelegate: routemaster, routeInformationParser: const RoutemasterParser(), )
30. Navigator API/Navigation 1.0
31. router.dart final router = RegexRouter.create({ // Access "object" arguments from `NavigatorState.pushNamed`. productDetailsViewRoute: (context, args) => ProductDetails(id: args["id"]), });
32. route.dart const String homeViewRoute = '/'; const String productViewRoute = '/product'; const String productDetailsViewRoute = '/product/:id'; const String ordersViewRoute = '/orders'; const String supportViewRoute = '/support'; const String profileViewRoute = '/profile'; const String searchViewRoute = '/search'; const String notFoundViewRoute = '/404'; const String noAuthViewRoute = '/no-auth';
33. main.dart MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', routes: <String, WidgetBuilder>{ homeViewRoute: (BuildContext context) => const HomeView(), productViewRoute: (BuildContext context) => const ProductListing(), searchViewRoute: (BuildContext context) => const SearchPage(), }, onUnknownRoute: (settings) => MaterialPageRoute( settings: settings, builder: (_) => const NotFoundPage()), onGenerateRoute: (settings) { developer.log(settings.name ?? 'No name', name: 'Route Name'); return router.generateRoute(settings); }, )
34. “Deep links helps enhance your overall product experience” Samuel Abada
35. Resources - Google iO 23 - Deep dive into flutter deep linking - Deepa - A guide to flutter deeplinking - Setup app links in android - Set up universal links in ios - Deep linking in flutter
36. Thank You 🎉🥳 Samuel Abada He/Him Mobile Engineer mastersam_ mastersam07