Deep Links

Setup

Deep links are already setup for iOS, Android, macOS and Windows, using the provided organization at Floot project creation.

The set scheme follow this format your.org.projectname. Let's say you created a Floot project named hello_world and set your organization to com.mycompany, then the scheme for deep links will be com.mycompany.helloworld.

FYI the default organization (if not provided at project creation) is com.example, so in the example above the scheme would be com.example.helloworld.

Scheme customization

To customize the default deep links schemes, follow the steps bellow based on your platform of choice:

Go to ios/Runner/Info.plist → CFBundleURLTypes → CFBundleURLSchemes → edit the scheme string.

/ios/Runner/Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>com.example.app</string>
    </array>
  </dict>
</array>

Go to android/app/src/main/AndroidManifest.xml → application → activity → intent-filter → edit the data android:scheme string.

/android/app/src/main/AndroidManifest.xml

<intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    <data android:scheme="com.example.app"/>
</intent-filter>

Go to macos/Runner/Info.plist → CFBundleURLTypes → CFBundleURLSchemes → edit the scheme string.

Optionally you can also edit the CFBundleURLName which by default is the project_name.

/macos/Runner/Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <!-- abstract name for this URL type (you can leave it blank) -->
    <string>app_name</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>com.example.app</string>
    </array>
  </dict>
</array>

Go to pubspec.yaml → msix_config → protocol_activation → edit the scheme string.

/pubspec.yaml

msix_config:
  display_name: "App Name"
  msix_version: 0.0.1
  protocol_activation: "com.example.app"

Add App Links package to your VSCode path

If you created your Floot app on a Windows machine, you can skip this step, the username is already set automatically.

Update {{username}} in .vscode/c_cpp_properties.json → configurations → includePath with your actual Windows username (do not modify any other part of the file!).

.vscode/c_cpp_properties.json

{
  "configurations": [
    {
      "includePath": [
        "${workspaceFolder}/**",
        "C:/Users/{{username}}/AppData/Local/Pub/Cache/hosted/pub.dev/app_links-6.1.4/windows/include"
      ]
    }
  ],
  "version": 4
}

Finding your Windows username

Not sure what your username is? you can find it in the path to your home directory, which is usually C:\Users\{{username}}.

Another way to get the current username is to use this command in your terminal (PowerShell):

PowerShell

$env:USERNAME

OAuth handling

Before You Proceed

Only mandatory if you did not provide a custom organization at Floot app creation! More info here!

When using OAuth authentication, users should be brought back into the app at the end of the process. To enable that, the scheme should be provided in different places.

Flutter

The scheme should always be the same as the one set in your apps. Take a look into scheme setup for a better understanding.

OAUTH_REDIRECT_URL should always be in this format: your.scheme://your-path. By default Floot set your-path to "oauth-callback", its recommended to use the same format and only edit your.scheme. Example: com.example.app://oauth-callback.

.env*

# Your redirect url
OAUTH_REDIRECT_URL="com.example.app://oauth-callback"

Supabase

The redirect url should always be the same as the one provided in Flutter .env*.

supabase/config.toml

# Append your redirect url to the array (in this case, it corresponds to the second item)
additional_redirect_urls = ["https://127.0.0.1:3000", "com.example.app://oauth-callback"]

Handling Deep Links (in app)

To handle redirection after your app has been opened by a deep link, look for deep_link_listener.dart file and edit openAppLink(...) function.

lib/core/presentation/views/widgets/deep_link_listener.dart

class _DeepLinkListenerState extends State<DeepLinkListener> {
	...

  void openAppLink(Uri uri) {
    // ...existing code

    // your handling logic here!
  }

  ...
}