Flutter
With Web3Modal Flutter, you can easily let people interact with multiple EVM compatible wallets and blockchains.
Let's get started with the installation and configuration!
If you are looking to migrate from WalletConnectModal to Web3Modal, please refer to our migration guide.
Installation​
Check out pub.dev for detailed instructions on how to install or simply add it as dependency in your pubspec.yaml (and run an implicit flutter pub get
):
flutter pub add web3modal_flutter
Enable Installed Wallet Detection​
To enable Web3Modal to detect wallets installed 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 is available from Web3Modal version 3.1.0 and higher
Since Coinbase Wallet uses it own SDK there are a few simply steps to do if you are planning to include and support it
- 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 (try? CoinbaseWalletSDK.shared.handleResponse(url)) == true {
return true
}
} else {
// Fallback on earlier versions
}
// handle other types of deep links
return false
}
override func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
if #available(iOS 13.0, *) {
if let url = userActivity.webpageURL,
(try? CoinbaseWalletSDK.shared.handleResponse(url)) == true {
return true
}
} else {
// Fallback on earlier versions
}
// handle other types of deep links
return false
}
- 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>
If you don't want to include/support Coinbase Wallet you just need to pass the walletId fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa
to excludedWalletIds options Array.
Was this helpful?