kakao developers

Flutter

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.

Features

The Flutter SDK has the following features:

• Uses Dart language that enables you to develop multi-platforms from a single codebase.
• Supports Android, iOS and Web platforms.
  • Web platform is supported in Flutter SDK version 1.3.0-beta.1 or higher.
• Provides equal functionalities to the Kakao SDK for Android and iOS.
• Has an intuitive interface similar to the usability of REST API.
• Adopts various libraries for networking, cryptography, and JSON libraries to maximize performance.
• Adopts a default browser (AuthenticationSession, CustomTabs) instead of WebView to enhance security.

Requirements

Here are what you need to use the Flutter SDK:

• Flutter 2.0.0 or higher
• Dart 2.14.0 or higher
• Android Studio 3.6.1 or higher
• Target Android API level 21 or higher (Android 5.0 or higher)
• Xcode 11.0 or higher
• iOS 11.0 or higher
• iOS Deployment Target 11.0 or higher

External library dependency

The Flutter SDK uses the following libraries that are automatically installed when installing the Flutter SDK:

• dio
• json_annotation
• platform
• shared_preference
• crypto
• encrypt

Supported web browser

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.

* Flutter SDK supports the latest two versions of Chrome, Edge, and Firefox.

Prerequisites

Platform Setup

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.

For Android

1. Add key hashes.
2. Specify your package name in [My Application] > [Platform] > [Android] by referring to Register platforms.
3. Add a code block to grant Internet permission in the module-level build.gradle file.

For iOS

1. Specify your Bundle ID in [My Application] > [Platform] > [iOS] by referring to Register platforms.
2. Register Allowlist and set URL Scheme.

For Web

1. Register a site domain in [My Application] > [Platform] > [Web].
2. If you implement Kakao Login, you must set Redirect URI. Refer to the Custom URL Scheme Setup
3. Optional: To support web pages on a hybrid application, integrate SDK in a hybrid app.

Custom URL Scheme Setup

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}.

• Kakao Login: oauth
• Kakao Talk Sharing, Kakao Talk Messaging: kakaolink
• Kakao Story: kakaostory

For additional information about custom URL scheme usage, see the below.

• Receiving a custom URL scheme
• Sending data with a custom URL scheme

For Android

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 Sharing, Kakao Talk Messaging, Kakao Story

  • 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.

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>

For iOS

To use a custom URL scheme on iOS devices, both allowlist registration and URL Scheme setting are required. Refer to Configure build settings

Install SDK

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

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)

$ flutter pub add kakao_flutter_sdk

$ flutter pub get

Package dependency

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.

Initialize SDK

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());
    ...
}

Additional Information

Set up for hybrid app

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.

Receiving a custom URL scheme

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.

Sending data with a custom URL scheme

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

See more

• Download Flutter SDK
• API Reference →