Flutter
With AppKit Flutter, you can easily let people interact with multiple EVM compatible wallets and blockchains.
Let's get started with the installation and configuration!
Installation
-
- Add
reown_appkit
as dependency in yourpubspec.yaml
and runflutter pub get
(check out the latest version) - Or simply run
flutter pub add reown_appkit
- Add
-
- Locate your
/ios/Podfile
file and add the following as the first line:
- Locate your
platform :ios, '13.0'
-
- Run
$ pod install
inside/ios
folder.
- Run
-
- You should now be able to run your app with
flutter run --dart-define=PROJECT_ID={your_project_id}
- You should now be able to run your app with
Enable Installed Wallet Detection
To enable AppKit to detect installed wallets on the device, you need to make specific changes to the native sides of the project.
- iOS
- Android
- Open your
Info.plist
file. - Locate the
<key>LSApplicationQueriesSchemes</key>
section. - Add the desired wallet schemes as string entries within the
<array>
. These schemes represent the wallets you want to detect. - Refer to our Info.plist example file for a detailed illustration.
Example:
<key>LSApplicationQueriesSchemes</key>
<array>
<string>metamask</string>
<string>trust</string>
<string>safe</string>
<string>rainbow</string>
<!-- Add other wallet schemes names here -->
</array>
- Open your
AndroidManifest.xml
file. - Add your
<queries>...</queries>
schemes outside of<application />
scope. - Refer to Android Specs for more information.
Example:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<queries>
<package android:name="io.metamask"/>
<package android:name="com.wallet.crypto.trustapp"/>
<package android:name="io.gnosis.safe"/>
<package android:name="me.rainbow"/>
<!-- Add other wallet schemes names here -->
</queries>
<application>
...
</application>
</manifest>
Enable Coinbase Wallet
Coinbase Wallet does not use the WalletConnect protocol for communication between the dApp and the wallet. This means that pairing topic, session topic, and other session data are not used when connected to Coinbase Wallet. However, you can still enable it to seamlessly connect with your dApp with these additional steps.
On your iOS and Android native side make the following changes:
- iOS
- Android
- Open your
Info.plist
file. - Locate the
<key>LSApplicationQueriesSchemes</key>
section. - Include
<string>cbwallet</string>
scheme as mentioned above in previous section
Example:
<key>LSApplicationQueriesSchemes</key>
<array>
<string>cbwallet</string>
<!-- Any other scheme previously added -->
</array>
- Make sure pods are installed, otherwise run
pod install
inside your/ios
folder. - Open your
/ios/Runner.xcworkspace
file with Xcode and add the following code inAppDelegate.swift
file:
import CoinbaseWalletSDK
override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
if #available(iOS 13.0, *) {
if (CoinbaseWalletSDK.isConfigured == true) {
if (try? CoinbaseWalletSDK.shared.handleResponse(url)) == true {
return true
}
}
}
return super.application(app, open: url, options: options)
}
override func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
if #available(iOS 13.0, *) {
if (CoinbaseWalletSDK.isConfigured == true) {
if let url = userActivity.webpageURL,
(try? CoinbaseWalletSDK.shared.handleResponse(url)) == true {
return true
}
}
}
return super.application(application, continue: userActivity, restorationHandler: restorationHandler)
}
Checkout out the AppDelegate.swift file from our sample dapp for reference.
- Open your
AndroidManifest.xml
file. - Add
<package android:name="org.toshi"/>
scheme inside<queries>...</queries>
as mentioned above in previous section
Example:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<queries>
<package android:name="org.toshi"/>
<!-- Any other scheme previously added -->
</queries>
<application>
...
</application>
</manifest>
Disable Coinbase Wallet
Coinbase Wallet is enabled by default even if, in order to function properly, a few steps has to be done as described in the previous section. However, if you don't want to include/support Coinbase Wallet on your app you just need to pass Coinbase Wallet id fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa
to excludedWalletIds options Array.