This document describes what you should do to integrate the Kakao SDK for Flutter (hereinafter referred to as 'Flutter SDK') into your service before leveraging the Kakao APIs.
The Flutter SDK has the following features:
Here are what you need to use the Flutter SDK:
The Flutter SDK uses the following libraries that are automatically installed when installing the Flutter SDK:
The Flutter SDK supports the most commonly used web browsers on mobile apps and web apps. Here are the web browsers that Flutter SDK supports. The web platform is supported in Flutter SDK version 1.3.0-beta.1 or higher.
Browser / Platform | Android | iOS | macOS | Windows |
---|---|---|---|---|
Chrome* | O | O | O | O |
Edge* | O | O | O | O |
Firefox* | O | O | O | O |
Safari | X | O | O | X |
Internet Explorer (IE) | X | X | X | X |
* Flutter SDK supports the latest two versions of Chrome, Edge, and Firefox.
To develop with the Flutter SDK, you must configure the settings for both Android and iOS platforms. To support a web app as well as a mobile app, you must also configure the settings for the web platform.
To use a custom URL scheme on Android devices, you must set a custom URL scheme to launch your service app when a user clicks a button or link in the Kakao Talk message or to be returned to your service app when Kakao Login process is done.
After setting up a custom URL scheme, you can launch the service app using by kakao${YOUR_NATIVE_APP_KEY}://${PRODUCT_NAME}
type scheme. Input the native app key to ${YOUR_NATIVE_APP_KEY}
by referring to [My Application] > [App Keys]. Input the following host
property of product to ${PRODUCT_NAME}
.
oauth
kakaolink
kakaostory
For additional information about custom URL scheme usage, see the below.
Edit AndroidManifest.xml file in Flutter project ${Project}
> android > app > src.
Kakao Login
<activity>
element for setting Redirect URI inside <application>
element. See the example below.Kakao Talk Sharing, Kakao Talk Messaging, Kakao Story
<application>
element with android:name=".MainActivity"
property, add <intent-filter>
with <data android:host="${PRODUCT_NAME}" android:scheme="kakao${YOUR_NATIVE_APP_KEY}" />
type element. See the example below.If your app is targeting Android 12 (API 31) or higher, you must declare android:exported
and set it to true
.
<application>
<!-- Setting for Kakao Login Custom URI Scheme -->
<activity
android:name="com.kakao.sdk.flutter.AuthCodeCustomTabsActivity"
android:exported="true">
<intent-filter android:label="flutter_web_auth">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<!-- Setting for "kakao${YOUR_NATIVE_APP_KEY}://oauth" type app execution scheme -->
<!-- Kakao Login Redirect URI -->
<data android:scheme="kakao${YOUR_NATIVE_APP_KEY}" android:host="oauth"/>
</intent-filter>
</activity>
<!-- Custom URL Scheme for Kakao Talk Sharing, Kakao Talk Messaging, Kakao Story -->
<activity
android:name=".MainActivity"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:exported="true"
android:hardwareAccelerated="true"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:windowSoftInputMode="adjustResize">
<!-- skip -->
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<!-- Setting for "kakao${YOUR_NATIVE_APP_KEY}://oauth" type app execution scheme -->
<!-- Kakao Talk Sharing, Kakao Talk Messaging -->
<data android:host="kakaolink"
android:scheme="kakao${YOUR_NATIVE_APP_KEY}" />
<!-- Kakao Story -->
<data android:host="kakaostory"
android:scheme="kakao${YOUR_NATIVE_APP_KEY}" />
</intent-filter>
</activity>
</application>
To use a custom URL scheme on iOS devices, both allowlist registration and URL Scheme setting are required. Refer to Configure build settings
To import the Kakao Flutter library in your project, set dependencies as follows.
Step 1. Add dependenciesAdd the following dependencies in pubspec.yaml depending on the package you want to use. If you add kakao_flutter_sdk
, you can use all packages. If you need to implement a particular function, you can add the corresponding package only.
dependencies:
kakao_flutter_sdk: ^1.3.1 # Add all packages
kakao_flutter_sdk_user: ^1.3.1 # Add for Kakao Login
kakao_flutter_sdk_talk: ^1.3.1 # Add for Kakao Talk messaging, Kakao Talk Social (Retrieve Kakao Talk profile, Retrieve list of friends)
kakao_flutter_sdk_story: ^1.3.1 # Add for Kakao Story
kakao_flutter_sdk_share: ^1.3.1 # Add for Kakao Talk sharing
kakao_flutter_sdk_navi: ^1.3.1 # Add for Kakao Navi
kakao_flutter_sdk_friend: ^1.4.0 # Kakao Talk Social (Retrieve friends through picker)
To add all packages, you can also run the following command in Terminal.
$ flutter pub add kakao_flutter_sdk
To get the packages, run the following command in Terminal.
$ flutter pub get
Some packages in the Kakao SDK are dependent on another package. If you add the Common or Auth package, its subordinate packages are automatically added together.
If your app is using the Flutter SDK 0.9.0 or lower, update your source code by referring to What's new in Flutter SDK 1.0.0.
After installing the Flutter library, you need to initialize the SDK with your app keys that are issued when you create your app in Kakao Developers.
In main.dart, add the init()
method. For the Android and iOS platforms, set nativeAppKey
to your Native app key. For the Web platform, set javaScriptAppKey
to your JavaScript key. To support all platforms, you can add both nativeAppKey
and javaScriptAppKey
.
import 'package:kakao_flutter_sdk_common/kakao_flutter_sdk_common.dart';
// Initialize Flutter SDK for Kakao to use Kakao APIs.
void main() {
...
// Only required if you develop a web app with the Flutter SDK.
// You must call ensureInitialized() before calling runApp().
WidgetsFlutterBinding.ensureInitialized();
KakaoSdk.init(
nativeAppKey: '${YOUR_NATIVE_APP_KEY}',
javaScriptAppKey: '${YOUR_JAVASCRIPT_APP_KEY}',
);
runApp(MyApp());
...
}
If you want to use the Flutter SDK for a web page on a hybrid application (hereinafter referred to as 'hybrid app'), you must develop a WebView as follows to work properly. Required actions are the same as Kakao SDK for JavaScript. Refer to Set up for hybrid app.
Explains to receive a custom URL scheme of Kakao Talk Sharing, Kakao Talk Messaging, and Kakao Story.
For an app that is not running, call the function below when the app runs.
String? url = await receiveKakaoScheme();
// Custom URL scheme is assigned to url. Write the usage code for the assigned scheme.
For a running app, you can receive a custom URL scheme via Stream
provided by the Dart language. See the example below.
kakaoSchemeStream.listen((url) {
// Custom URL scheme is assigned to url. Write the usage code for the assigned scheme.
}, onError: (e) {
// Write an exception handling code for the error.
});
The above two functions should be called at the time after the Flutter SDK initialization. See SDK Initialization.
In the case of native apps, additional data can be sent with a custom URL scheme for the service requirement. Set the key and value to androidExecutionParams
, iosExecutionParams
parameter. See the example below.
kakao${YOUR_NATIVE_APP_KEY}://${PRODUCT_NAME}?${androidExecutionParams}
kakao${YOUR_NATIVE_APP_KEY}://${PRODUCT_NAME}?${iosExecutionParams}
// Example
kakao${YOUR_NATIVE_APP_KEY}://kakaolink?key1=value1&key2=value2&key3=value3