Flutter - How to pass custom arguments in firebase dynamic links for app invite feature?

Question

Can you please tell me how to Send and fetch the arguments using the flutter plugin firebase_dynamic_links[https://pub.dev/packages/firebase_dynamic_links#-readme-tab-]?

I want to pass parameters like username and password in the deeplink/dynamic link as follow :

uriPrefix: 'https://test.page.link/appinvite?username=Test&password=123456',
link: Uri.parse('https://test.page.link/appinvite?username=Test&password=123456'),

Is this the correct way to pass the data ?

After that i am using below code to fetch data,

await FirebaseDynamicLinks.instance.getInitialLink();
final Uri deepLink = data?.link;

But, it is providing me the dummy web URL i have added in the firebase console for firebase dynamic links in Deep Link URL

currently i am able to open the app from firebase dynamic link but, unable to fetch custom parameters.

Any help will be appreciated.

Updated Code :

For sending invite :

_generateAndShareDynamicLink() async {
    final DynamicLinkParameters parameters = DynamicLinkParameters(
      uriPrefix: 'https://test.page.link/groupinvite',
      link: Uri.parse('https://test.page.link/groupinvite'),
      androidParameters: AndroidParameters(
        packageName: 'com.test.flutter_authentication',
        minimumVersion: 0,
      ),
      dynamicLinkParametersOptions: DynamicLinkParametersOptions(
        shortDynamicLinkPathLength: ShortDynamicLinkPathLength.unguessable,
      ),
    );

    Uri url = await parameters.buildUrl();

    shareURL(Uri.https(url.authority, url.path, {"username": "Test"}));
}

For fetching data inside initState() :

FirebaseDynamicLinks.instance.onLink(
        onSuccess: (PendingDynamicLinkData dynamicLink) async {
          final Uri deepLink = dynamicLink?.link;
          _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("deepLink2 : ${deepLink}",)));
          if (deepLink != null) {
            Map sharedListId = deepLink.queryParameters;
            print("sharedListId : ${sharedListId}");

            String username=sharedListId["username"];
            print("username : ${username}");

            Navigator.pushNamed(context, deepLink.path);
          }
        }, onError: (OnLinkErrorException e) async {
      print('onLinkError');
      print(e.message);
    });

Still retrieved data is null.

Can anybody help ?

Answer 1

The best way to use dynamic links are,

import 'package:firebase_dynamic_links/firebase_dynamic_links.dart';
import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {

  @override
  void initState() {
    super.initState();
    fetchLinkData();
  }

  void fetchLinkData() async {
    // FirebaseDynamicLinks.getInitialLInk does a call to firebase to get us the real link because we have shortened it.
    var link = await FirebaseDynamicLinks.instance.getInitialLink();

    // This link may exist if the app was opened fresh so we'll want to handle it the same way onLink will.
    handleLinkData(link);

    // This will handle incoming links if the application is already opened
    FirebaseDynamicLinks.instance.onLink(onSuccess: (PendingDynamicLinkData dynamicLink) async {
      handleLinkData(dynamicLink);
    });
  }

  void handleLinkData(PendingDynamicLinkData data) {
    final Uri uri = data?.link;
    if(uri != null) {
      final queryParams = uri.queryParameters;
      if(queryParams.length > 0) {
        String userName = queryParams["username"];
        // verify the username is parsed correctly
        print("My users username is: $userName");
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample"),
      ),
      body: Center(
        child: Text("Test"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          var dynamicLink = await createDynamicLink(userName: "Test");
          // dynamicLink has been generated. share it with others to use it accordingly.
          print("Dynamic Link: $dynamicLink");
        },
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
    );
  }

  Future<Uri> createDynamicLink({@required String userName}) async {
    final DynamicLinkParameters parameters = DynamicLinkParameters(
      // This should match firebase but without the username query param
      uriPrefix: 'https://test.page.link',
      // This can be whatever you want for the uri, https://yourapp.com/groupinvite?username=$userName
      link: Uri.parse('https://test.page.link/groupinvite?username=$userName'),
      androidParameters: AndroidParameters(
        packageName: 'com.test.demo',
        minimumVersion: 1,
      ),
      iosParameters: IosParameters(
        bundleId: 'com.test.demo',
        minimumVersion: '1',
        appStoreId: '',
      ),
    );
    final link = await parameters.buildUrl();
    final ShortDynamicLink shortenedLink = await DynamicLinkParameters.shortenUrl(
      link,
      DynamicLinkParametersOptions(shortDynamicLinkPathLength: ShortDynamicLinkPathLength.unguessable),
    );
    return shortenedLink.shortUrl;
  }
}

You're done.

Answer 2

This worked for me

The sending side:

Future<String> generateLink() async {
final DynamicLinkParameters parameters = DynamicLinkParameters(
      uriPrefix: 'https://<your-domain-name>.page.link',
      link: Uri.parse(
          'https://<your-domain-name>.page.link/<your-route>/?id=acb&name=me'), // <- your paramaters
      dynamicLinkParametersOptions: DynamicLinkParametersOptions(
          shortDynamicLinkPathLength: ShortDynamicLinkPathLength.unguessable),
      androidParameters: AndroidParameters(
        packageName: '<package-name>',
        minimumVersion: 0,
      ),
      socialMetaTagParameters: SocialMetaTagParameters(
        title: "click the link",
      ),
    );
    final Uri dynamicUrl = await parameters.buildUrl();
    final ShortDynamicLink shortenedLink =
        await DynamicLinkParameters.shortenUrl(
      dynamicUrl,
      DynamicLinkParametersOptions(
          shortDynamicLinkPathLength: ShortDynamicLinkPathLength.unguessable),
    );
    final Uri shortUrl = shortenedLink.shortUrl;
    return "https://<your-domain-name>.page.link" + shortUrl.path;
  }

The receiving side:

FirebaseDynamicLinks.instance.onLink(
    onSuccess: (PendingDynamicLinkData dynamicLink) async {
      final Uri deepLink = dynamicLink?.link;
      if (deepLink != null) {
        print(deepLink.queryParameters['id']); // <- prints 'abc'
      }
    }, onError: (OnLinkErrorException e) async {
    print('onLinkError');
    print(e.message);
  }
);