This document guides how to use the Kakao SDK for Flutter("Flutter SDK") provided by the Kakao Developers.

The packages and main features of Flutter SDK are below.

• Flutter 3.38.0 or higher
• Dart 3.9.0 or higher
• Target Android API level 21 or higher (Android 5.0 or higher)
• Xcode 11.0 or higher
• iOS 13.0 or higher

The Flutter SDK supports web browsers below in the mobile and PC web environments.

Refer to the details below and the Platform key, then register the platform information supported by your service in [App] > [Platform key] on the app management page.

• Native app only: Register the Native app key (Android, iOS).
• Web only: Register the JavaScript key.
• Both native app and web: Register the Native app key (Android, iOS) and the JavaScript key.

The bundle ID for iOS platform information is on [Target] > [General] > [Bundle Identifier] in Xcode. Open the project in Xcode or [${Project}] > [ios] in Android Studio.

Bundle ID in Android Studio

Bundle ID in Xcode

Kakao Developers provides a sample app that enables you to quickly check the key features of the Flutter SDK. With the sample app, you can test SDK features such as Kakao Login and Kakao Talk Share directly and review the implementation example code.

This section describes how to run the Flutter SDK sample app.

1. Import the project from the Flutter SDK GitHub repository.
2. To run the sample app features in an Android environment, you must register the debug key hash of the imported sample app project in [Android SDK sample app] on the Account settings page. For the details, see Android SDK sample app.
3. You can run the sample app to test the key features of the Flutter SDK and review the implementation example code.

To use a custom URL scheme on Android devices, set a custom URL scheme to launch the service app when a user clicks a button or link in the Kakao Talk message or to be returned to the service app when Kakao Login process is done.

After setting up a custom URL scheme, launching the service app using the kakao${YOUR_NATIVE_APP_KEY}://${PRODUCT_NAME} type scheme is available. Input the native app key to ${YOUR_NATIVE_APP_KEY} by referring to [App] > [Platform key] on the app management page. Input the following host property of product to ${PRODUCT_NAME}.

• Kakao Login: oauth
• Kakao Talk Share, Kakao Talk Message: kakaolink

Edit AndroidManifest.xml file in Flutter project ${Project} > android > app > src.

• Kakao Login
  • Add <activity> element for setting Redirect URI inside <application> element. See the example below.
• Kakao Talk Share, Kakao Talk Message
  • Inside of <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.
• For the app targeting Android 12 (API 31) or higher, declare android:exported and set it to true.

<application>

    <!-- Setting for Kakao Login Custom URI Scheme -->
    <activity
        android:name="com.kakao.sdk.flutter.auth.AuthCodeHandlerActivity"
        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 Share, Kakao Talk Message -->
    <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 Share, Kakao Talk Message -->
            <data android:host="kakaolink"
                android:scheme="kakao${YOUR_NATIVE_APP_KEY}" />
        </intent-filter>
    </activity>
</application>

To use a custom URL scheme on iOS devices, both setting below are required.

• Allowlist
  • Open the project in Xcode via [${Project}] > [ios] and set the allowlist
  • Setting path: [TARGET] > [Info] > [Custom iOS Target Properties]
  • Path of Info.plist file for manual setting: [${Project}] > [ios] > [Runner] > [Info.plist]
• URL Schemes
  • Open the project in Xcode via [${Project}] > [ios] and set the URL schemes
  • Setting path: [TARGET] > [Info] > [URL Types] > [URL Schemes]

For Kakao Talk Share and Kakao Talk Message, you can get a custom URL scheme by calling the function below regardless of whether the app is running or not.

receiveKakaoScheme((Uri uri) {
    // Custom URL scheme is assigned to url. Write the usage code for the assigned scheme.
});

The function above should be called after initializing the Flutter SDK. See Initialize.

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

To use the Flutter SDK for a web page on a hybrid application ("hybrid app"), 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.

To import the Kakao Flutter packages in the project, set dependencies as follows.

Add the dependency for the Flutter SDK in pubspec.yaml. Add desired or all packages.

dependencies:
  kakao_flutter_sdk: ^{LATEST_VERSION} # Add all packages
  kakao_flutter_sdk_user: ^{LATEST_VERSION} # Package for the Kakao Login APIs
  kakao_flutter_sdk_share: ^{LATEST_VERSION} # Package for the Kakao Talk Share APIs
  kakao_flutter_sdk_talk: ^{LATEST_VERSION} # Package for the Kakao Talk Channel, Kakao Talk Social, Kakao Talk Message APIs
  kakao_flutter_sdk_friend: ^{LATEST_VERSION} # Package for the picker APIs
  kakao_flutter_sdk_navi: ^{LATEST_VERSION} # Package for the Kakao Navi APIs

To add all packages, 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

Call the init() method in the main() function. Note that the initialization should be done before calling runApp() method.

Platform key are required to initialize. Pass the app keys for the platforms that the service supports.

• Supports native apps only
  • Use Native app key to call Kakao APIs
  • Pass Native app key with nativeAppKey parameter when calling init() method
• Supports web only
  • Use JavaScript key to call Kakao APIs
  • Pass JavaScript key with javaScriptAppKey parameter when calling init() method
• Supports both Native apps and web
  • Use both JavaScript key and Native app key to call Kakao APIs
  • Pass Native app key with nativeAppKey parameter, and pass JavaScrip key with javaScriptAppKey when calling init() method

import 'package:kakao_flutter_sdk_common/kakao_flutter_sdk_common.dart';

// Initialize Flutter SDK for Kakao to use Kakao APIs.
void main() async {
    ...

    // To finish Kakao Login process successfully, call the method below
    WidgetsFlutterBinding.ensureInitialized();

    // Initialize the Flutter SDK before call runApp()
    await KakaoSdk.init(
      nativeAppKey: '${YOUR_NATIVE_APP_KEY}',
      javaScriptAppKey: '${YOUR_JAVASCRIPT_APP_KEY}',
    );

    runApp(MyApp());
    ...
}