페이지 이동경로
  • Docs>
  • Message>
  • Kakao Talk sharing: Flutter

Message

Kakao Talk sharing: Flutter

This document describes how to integrate Kakao Talk sharing APIs into your service with the Kakao SDK for Flutter (hereinafter referred to as 'Flutter SDK').

Before you begin

Before using the Kakao Talk sharing APIs with the Flutter SDK, you must complete the prerequisites.

Add modules

To use the features of Kakao Talk sharing service, you need to add kakao_flutter_sdk_share for Kakao Talk module in pubspec.yaml by referring to Install SDK. After that, add the following libraries in your dart file. After that, add the following libraries in your dart file.

import 'package:kakao_flutter_sdk_share/kakao_flutter_sdk_share.dart';
IMPORTANT

In Flutter SDK 1.2.0, the names of the module, classes, and methods related to Kakao Talk sharing have been changed due to the change of its service name. To see more detailed changes, see Version history.

Add queries

In Android 11, you must define how your app queries and interacts with the Kakao Talk app to send a message through Kakao Talk. If your app targets Android 11 or higher, add queries.

Set Custom URL Scheme

To make your app launch when a user clicks on a clickable component on the Kakao Talk message, you must set a custom URL scheme.

Choose an API to use

According to your service's purpose and requirements, you need to decide which API to use first by considering their characteristics and difference.

Step 1. Select a type of Messaging API

There are two types of messaging APIs: the Kakao Talk sharing API and the Kakao Talk messaging API. You need to understand the differences between the two messaging APIs completely by referring to Understand concepts, and decide which API to use to implement the function to send a message.

Step 2. Select a message type and configuration method

Decide which message template to use by referring to Message template > Types.

You can configure a message according to the default template in JSON format or create a custom template in person for your service. Refer to Message configuration method for more details.

After configuring a message, you must call the corresponding API according to the desired message template type. If the request is successful, the Flutter SDK launches Kakao Talk or lets a user log in with Kakao Account on a web page, and then shows a list of friends or chatrooms. When a user selects friends or a chatroom to send the message to, the messages are sent to the selected targets.

Configure a message

When you configure a Kakao Talk message through the Kakao Talk sharing or Kakao Talk messaging APIs, use one of the classes defined in DefaultTemplate according to a message type by referring to Message template components. Then, create an object for the desired message type among five types, and define the message content for the template object.

Here are the code snippets showing how to configure a message for each message type.

Feed
List
Location
Commerce
Text
import 'package:kakao_flutter_ sdk_template.dart';

final FeedTemplate defaultFeed = FeedTemplate(
  content: Content(
    title: 'Strawberry Cheese Cake',
    description: '#Cake #Strawberry #Sampyeong-dong #Cafe #Vibe #BlindDate',
    imageUrl: Uri.parse(
        'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png'),
    link: Link(
        webUrl: Uri.parse('https://developers.kakao.com'),
        mobileWebUrl: Uri.parse('https://developers.kakao.com')),
  ),
  itemContent: ItemContent(
    profileText: 'Kakao',
    profileImageUrl: Uri.parse(
        'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png'),
    titleImageUrl: Uri.parse(
        'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png'),
    titleImageText: 'Cheese cake',
    titleImageCategory: 'cake',
    items: [
      ItemInfo(item: 'cake1', itemOp: '1000 won'),
      ItemInfo(item: 'cake2', itemOp: '2000 won'),
      ItemInfo(item: 'cake3', itemOp: '3000 won'),
      ItemInfo(item: 'cake4', itemOp: '4000 won'),
      ItemInfo(item: 'cake5', itemOp: '5000 won')
    ],
    sum: 'total',
    sumOp: '15000 won',
  ),
  social: Social(likeCount: 286, commentCount: 45, sharedCount: 845),
  buttons: [
    Button(
      title: 'View on Web',
      link: Link(
        webUrl: Uri.parse('https: //developers.kakao.com'),
        mobileWebUrl: Uri.parse('https: //developers.kakao.com'),
      ),
    ),
    Button(
      title: 'View on App',
      link: Link(
        androidExecutionParams: {'key1': 'value1', 'key2': 'value2'},
        iosExecutionParams: {'key1': 'value1', 'key2': 'value2'},
      ),
    ),
  ],
);
import 'package:kakao_flutter_ sdk_template.dart';

final ListTemplate defaultList = ListTemplate(
  headerTitle: 'WEEKLY MAGAZINE',
  headerLink: Link(
    webUrl: Uri.parse('https://developers.kakao.com'),
    mobileWebUrl: Uri.parse('https://developers.kakao.com'),
  ),
  contents: [
    Content(
      title: 'My hobby, Table tennis',
      description: 'Sports',
      imageUrl: Uri.parse(
          'https://mud-kage.kakao.com/dn/bDPMIb/btqgeoTRQvd/49BuF1gNo6UXkdbKecx600/kakaolink40_original.png'),
      link: Link(
        webUrl: Uri.parse('https://developers.kakao.com'),
        mobileWebUrl: Uri.parse('https://developers.kakao.com'),
      ),
    ),
    Content(
      title: 'Understanding coffee with cream',
      description: 'Food',
      imageUrl: Uri.parse(
          'https://mud-kage.kakao.com/dn/QPeNt/btqgeSfSsCR/0QJIRuWTtkg4cYc57n8H80/kakaolink40_original.png'),
      link: Link(
        webUrl: Uri.parse('https://developers.kakao.com'),
        mobileWebUrl: Uri.parse('https://developers.kakao.com'),
      ),
    ),
    Content(
      title: 'Emotional atmosphere',
      description: 'Photo',
      imageUrl: Uri.parse(
          'https://mud-kage.kakao.com/dn/c7MBX4/btqgeRgWhBy/ZMLnndJFAqyUAnqu4sQHS0/kakaolink40_original.png'),
      link: Link(
        webUrl: Uri.parse('https://developers.kakao.com'),
        mobileWebUrl: Uri.parse('https://developers.kakao.com'),
      ),
    ),
  ],
  buttons: [
    Button(
      title: 'View on Web',
      link: Link(
        webUrl: Uri.parse('https://developers.kakao.com'),
        mobileWebUrl: Uri.parse('https://developers.kakao.com'),
      ),
    ),
    Button(
      title: 'View on App',
      link: Link(
        androidExecutionParams: {'key1': 'value1', 'key2': 'value2'},
        iosExecutionParams: {'key1': 'value1', 'key2': 'value2'},
      ),
    ),
  ],
);
import 'package:kakao_flutter_ sdk_template.dart';

final LocationTemplate defaultLocation = LocationTemplate(
  address: '235, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do',
  content: Content(
    title: '"New menu release❤️ Cherry Blossom Latte',
    description: 'Cherry blossom latte 1+1 for this week',
    imageUrl: Uri.parse(
        'https://mud-kage.kakao.com/dn/bSbH9w/btqgegaEDfW/vD9KKV0hEintg6bZT4v4WK/kakaolink40_original.png'),
    link: Link(
      webUrl: Uri.parse('https://developers.kakao.com'),
      mobileWebUrl: Uri.parse('https://developers.kakao.com'),
    ),
  ),
  social: Social(likeCount: 286, commentCount: 45, sharedCount: 845),
);
import 'package:kakao_flutter_ sdk_template.dart';

final CommerceTemplate defaultCommerce = CommerceTemplate(
  content: Content(
    title: 'Ivory long dress (4 Color)',
    imageUrl: Uri.parse(
        'https://mud-kage.kakao.com/dn/RY8ZN/btqgOGzITp3/uCM1x2xu7GNfr7NS9QvEs0/kakaolink40_original.png'),
    link: Link(
      webUrl: Uri.parse('https://developers.kakao.com'),
      mobileWebUrl: Uri.parse('https://developers.kakao.com'),
    ),
  ),
  commerce: Commerce(
    regularPrice: 208800,
    discountPrice: 146160,
    discountRate: 30,
    productName: "Ivory long dress",
    currencyUnit: "₩",
    currencyUnitPosition: 1,
  ),
  buttons: [
    Button(
      title: 'Purchase',
      link: Link(
        webUrl: Uri.parse('https://developers.kakao.com'),
        mobileWebUrl: Uri.parse('https://developers.kakao.com'),
      ),
    ),
    Button(
      title: 'Share',
      link: Link(
        androidExecutionParams: {'key1': 'value1', 'key2': 'value2'},
        iosExecutionParams: {'key1': 'value1', 'key2': 'value2'},
      ),
    )
  ],
);
import 'package:kakao_flutter_ sdk_template.dart';

final TextTemplate defaultText = TextTemplate(
  text:
      'The Text template provided as a default template can contain text up to 200 characters. The Text template has a text area and a default button. You can also add an additional button. If you use Kakao Talk sharing, you can send a message with a more extended form of templates, such as sending multiple images and profile information.',
  link: Link(
    webUrl: Uri.parse('https: //developers.kakao.com'),
    mobileWebUrl: Uri.parse('https: //developers.kakao.com'),
  ),
);

As an example, here are the steps to configure and send a Feed message.

Step 1. Figure out template components

Check which object you should create for a Feed message by referring to Message template > Feed message. Feed message is defined as the FeedTemplate class.

Step 2. Define template components

Create the FeedTemplate object by referring to the guide and reference. As you check in Step 1, the Feed message contains content, social, buttons, and itemContent components. You must declare the required component, content for Feed message, in the object.

Step 3. Request to send a message

Pass the FeedTemplate object created in Step 2 when calling the Kakao Talk sharing or Kakao Talk messaging API.

Send message with default template

You can configure a message in your source code using a default template and share it through Kakao Talk. The default templates are defined in the DefaultTemplate class.

  1. To figure out if it is possible to share a message through Kakao Talk, call the isKakaoTalkSharingAvailable() method that checks if Kakao Talk is installed.
  2. If Kakao Talk is installed, call the shareDefault() method that shares a message using a default template through Kakao Talk.
    If not installed, call the makeDefaultUrl() method in the WebSharerClient class to open the message via a web view or a default browser.

Parameter

Name Type Description Required
template FeedTemplate
ListTemplate
LocationTemplate
CommerceTemplate
TextTemplate
Object of the message template to be sent.
For the desired template, you must create an instance by referring to Configure a message.
O
serverCallbackArgs Map<String, String> Used when you want to get a callback from Kakao to your service server when a message is successfully sent.
Refer to Set Kakao Talk sharing success callback.
X

Sample

// Check if Kakao Talk is installed.
bool result = await ShareClient.instance.isKakaoTalkSharingAvailable();
if (result) {
  print('Kakao Talk sharing is available.');
} else {
  print('If Kakao Talk is not installed, we recommend Kakao Talk sharing via web.');
}

// Send a Feed message.
try {
  Uri uri = await ShareClient.instance.shareDefault(template: defaultFeed);
  await ShareClient.instance.launchKakaoTalk(uri);
  print('Succeeded in Kakao Talk sharing.');
} catch (e) {
  print('Kakao Talk sharing failed.');
}
Return data

Calling shareDefault() launches the Kakao Talk application and shows the list of user's Kakao Talk friends or chatrooms. When a user selects friends or a chatroom to send the message to, the messages are sent to the selected targets.

shareDefault() returns SharingResult. Since the Kakao Talk sharing API does not inform the result of message delivery, implement the Kakao Talk sharing success callback function.

SharingResult
Name Type Description Required
argumentMsg Map<String, dynamic> Result of templateArgs validation. O
warningMsg Map<String, dynamic> Result of template validation. O

Send message with custom template

You can customize a template in [Tools] > [Message Template Builder] and send a message through Kakao Talk. Refer to Message template builder.

  1. To figure out if it is possible to share a message through Kakao Talk, call the isKakaoTalkSharingAvailable() method that checks if Kakao Talk is installed.
  2. If Kakao Talk is installed, call the shareCustom() method that shares a message using a custom template through Kakao Talk.
    If not installed, call the makeCustomUrl() method in the WebSharerClient class to open the message via a web view or a default browser.

Parameter

Name Type Description Required
templateId Int Template ID of the custom template registered in [Tools] > [Message Template Builder].
Refer to Message template builder.
O
templateArgs Map<String, String> If the specified template contains a user argument, use this parameter to pass key-value pairs.
You cannot overwrite the scrap result.
X
serverCallbackArgs Map<String, String> Used when you want to get a callback from Kakao to your service server when a message is successfully sent.
Refer to Set Kakao Talk sharing success callback.
X

Sample

// Sending Kakao Talk sharing message using custom template.
//  * Refer to the guide: https://developers.kakao.com/docs/latest/en/message/message-templatee/message-template

//  Template ID
int templateId = templateIds['customMemo']!;

// Checking if Kakao Talk is installed.
bool result = await ShareClient.instance.isKakaoTalkSharingAvailable();

// If Kakao Talk is installed, the Kakao Talk sharing message is sent through Kakao Talk.
if (result) {
  try {
    Uri uri = await ShareClient.instance.shareCustom(templateId: templateId, templateArgs: {'key1': 'value1'});
    await ShareClient.instance.launchKakaoTalk(uri);
    print('Succeeded in Kakao Talk sharing.');
  } catch (e) {
    print('Kakao Talk sharing failed.');
  }
} else {
  // If Kakao Talk is not installed, we recommend sending the Kakao Talk sharing message via web.

  int templateId = templateIds['customMemo']!;
  try {
    Uri shareUrl = await WebSharerClient.instance.makeCustomUrl(templateId: templateId, templateArgs: {'key1': 'value1'});    await launchBrowserTab(shareUrl);
  } catch (e) {
    print('Kakao Talk sharing failed.');
  }
}
Return data

Calling shareCustom() launches the Kakao Talk application and shows the list of user's Kakao Talk friends or chatrooms. When a user selects friends or a chatroom to send the message to, the messages are sent to the selected targets.

shareCustom() returns SharingResult. Since the Kakao Talk sharing API does not inform the result of message delivery, implement the Kakao Talk sharing success callback function.

Send scrap message with default template

You can configure a message with a default template by scraping a web page, and then send it through Kakao Talk.

  1. To figure out if it is possible to share a message through Kakao Talk, call the isKakaoTalkSharingAvailable() method that checks if Kakao Talk is installed.
  2. If Kakao Talk is installed, call the shareScrap() method that shares the scrapped message using a default template through Kakao Talk.
    If not installed, call the makeScrapUrl() method in the WebSharerClient class to open the message via a web view or a default browser.

Parameter

Name Type Description Required
url String Web page URL to be scraped. O
serverCallbackArgs Map<String, String> Used when you want to get a callback from Kakao to your service server when a message is successfully sent.
Refer to Set Kakao Talk sharing success callback.
X

Sample

// Sending Kakao Talk sharing message using default template.

// Check if Kakao Talk is installed.
bool result = await ShareClient.instance.isKakaoTalkSharingAvailable();

// If Kakao Talk is installed, the Kakao Talk sharing message is sent through Kakao Talk.
if (result) {
  // Web page URL to be shared.
  // * CAUTION: The domain of the URL to be shared must be registered in [My Appliction] > [Platform] > [Web] in Kakao Developers.
  String url = "https://developers.kakao.com";

  try {
    Uri uri = await ShareClient.instance.shareScrap(url: url);
    await ShareClient.instance.launchKakaoTalk(uri);
    print('Succeeded in Kakao Talk sharing.');
  } catch (e) {
      print('Kakao Talk sharing failed.');
  }
} else {
  // If Kakao Talk is not installed, we recommend sending the Kakao Talk sharing message via web.
  String url = "https://developers.kakao.com";

  try {
    Uri shareUrl = await WebSharerClient.instance.makeScrapUrl(url: url);
    await launchBrowserTab(shareUrl);
  } catch (e) {
    print('Kakao Talk sharing failed.');
  }
}
Return data

Calling shareScrap() launches the Kakao Talk application and shows the list of user's Kakao Talk friends or chatrooms. When a user selects friends or a chatroom to send the message to, the messages are sent to the selected targets.

shareScrap() returns SharingResult. Since the Kakao Talk sharing API does not inform the result of message delivery, implement the Kakao Talk sharing success callback function.

Send scrap message with custom template

You can configure a message with a custom template by scraping a web page, and then send it through Kakao Talk. You can use a custom template registered in [Tools] > [Message Template Builder] when requesting to send a scrap message. Refer to Message template builder.

  1. To figure out if it is possible to share a message through Kakao Talk, call the isKakaoTalkSharingAvailable() method that checks if Kakao Talk is installed.
  2. If Kakao Talk is installed, call the shareScrap() method that shares the scrapped message using a default template through Kakao Talk.
    If not installed, call the makeScrapUrl() method in the WebSharerClient class to open the message via a web view or a default browser.

Parameter

Name Type Description Required
url String Web page URL to be scraped. O
templateId Int Used when you want to send a scrap message with the template registered in [Tools] > [Message Template Builder].
Specify the ID of the template to apply.
When you use this parameter, the scraped content is applied in the template with the specified templateId.
O
templateArgs Map<String, String> If you specify templateId and the specifed template contains other user arguments besides the default argument keys, pass the user arguments using this parameter in key:value format.
You cannot overwrite the scrap result.
X
serverCallbackArgs Map<String, String> Used when you want to get a callback from Kakao to your service server when a message is successfully sent.
Refer to Set Kakao Talk sharing success callback.
X

Sample

// Sending Kakao Talk sharing message using custom template.

// Check if Kakao Talk is installed.
bool result = await ShareClient.instance.isKakaoTalkSharingAvailable();

// Web page URL to be shared.
// * CAUTION: The domain of the URL to be shared must be registered in [My Appliction] > [Platform] > [Web] in Kakao Developers.
String url = "https://developers.kakao.com";
//  Template ID
int templateId = templateIds['customMemo']!;

// If Kakao Talk is installed, the Kakao Talk sharing message is sent through Kakao Talk.
if (result) {
  try {
    Uri uri = await ShareClient.instance.shareScrap(url: url, templateId: templateId, templateArgs: {'key1': 'value1'});
    await ShareClient.instance.launchKakaoTalk(uri);
    print('Succeeded in Kakao Talk sharing.');
  } catch (e) {
      print('Kakao Talk sharing failed.');
  }  
} else {
  // If Kakao Talk is not installed, we recommend sending the Kakao Talk sharing message via web.

  try {
    Uri shareUrl = await WebSharerClient.instance.makeScrapUrl(url: url, templateId: templateId, templateArgs: {'key1': 'value1'});
    await launchBrowserTab(shareUrl);
  } catch (e) {
    print('Kakao Talk sharing failed.');
  }
}
Return data

Calling shareScrap() launches the Kakao Talk application and shows the list of user's Kakao Talk friends or chatrooms. When a user selects friends or a chatroom to send the message to, the messages are sent to the selected targets.

shareScrap() returns SharingResult. Since the Kakao Talk sharing API does not inform the result of message delivery, implement the Kakao Talk sharing success callback function.

Set Kakao Talk sharing success callback

The Kakao Talk sharing success callback is a function to send a callback request to the URL specified on Kakao Developers when a Kakao Talk sharing message is successfully sent to friends or a chatroom selected by a user. This function is only available for Kakao Talk sharing API, not for Kakao Talk messaging API.

To use this feature, you need to:

  1. Set the callback URL and request method by referring to Prerequisites > Set Kakao Talk sharing success callback.
  2. Build a server to receive a Kakao Talk sharing success callback.
  3. Set serverCallbackArgs to pass additional information when requesting the Kakao Talk sharing API.
  4. Implement a process to handle the callback delivered to your service server's callback URL.

To use the Kakao Talk sharing success callback function, you must specify a custom parameter through serverCallbackArgs. Otherwise, you cannot receive Kakao Talk sharing success callbacks even though you registered a callback URL for Kakao Talk sharing in [My Application]. When your service server receives a Kakao Talk sharing success callback, you can figure out additional information through the predefined custom parameters, such as what content the user has shared.

To pass additional information when requesting the Kakao Talk sharing API, declare serverCallbackArgs, and pass keys and values as a Map. Here is a code snippet showing how to set parameters for Kakao Talk sharing success callback.

int templateId = templateIds['customMemo']!;
Map<String, String> serverCallbackArgs = ["userId": "abcd", "productId": "1234"]

// Checking if Kakao Talk is installed.
bool result = await ShareClient.instance.isKakaoTalkSharingAvailable();
// If Kakao Talk is installed, the Kakao Talk sharing message is sent through Kakao Talk.
if (result) {
  try {
    Uri uri = await ShareClient.instance.shareCustom(templateId: templateId, serverCallbackArgs: serverCallbackArgs);
    await ShareClient.instance.launchKakaoTalk(uri);
    print('Succeeded in Kakao Talk sharing.');
  } catch (e) {
    print('Kakao Talk sharing failed.');
} else {
  // If Kakao Talk is not installed, we recommend sending the Kakao Talk sharing message via web.

  try {
    Uri shareUrl = await WebSharerClient.instance.makeCustomUrl(templateId: templateId, serverCallbackArgs: serverCallbackArgs);
    await launchBrowserTab(shareUrl);
  } catch (e) {
    print('Kakao Talk sharing failed.');
  }
}

If the Kakao Talk sharing message is successfully sent, Kakao sends a Kakao Talk sharing success callback including the specified parameters to the callback URL of your service server. For more information on the callback request, refer to Reference Information > Kakao Talk sharing success callback.

Upload image

You can attach images to a Kakao Talk message by passing an image URL when configuring a message template or uploading images in the Message template builder in advance.

To use the image file stored on your device for a message, you can either upload or scrape an image file to the Kakao Talk sharing server, and then obtain its URL value. The images uploaded to the Kakao Talk sharing server are stored for up to 20 days and automatically deleted after the period.

Uploading image
Scraping image

To upload an image, call the imageUpload() method defined in the ShareClient class. You can only upload an image with a file size of 2 MB or less.


// Uploading image

// Image file to be uploaded. In this sample, the image file added as a project resource is used.
ByteData byteData = await rootBundle.load('assets/images/cat1.png');

// In this sample, the project resource is saved as an image file by using path_provider.
File tempFile =
  File('${(await getTemporaryDirectory()).path}/cat1.png');
File file = await tempFile.writeAsBytes(byteData.buffer
  .asUint8List(byteData.offsetInBytes, byteData.lengthInBytes));

try {
  // Uploading an image to the Kakao image server
  ImageUploadResult imageUploadResult =
    await ShareClient.instance.uploadImage(image: file);
  print('Succeeded in upload an image. \n${imageUploadResult.infos.original}');
} catch (e) {
  print('Failed to upload an image.');
}

To use an image by scraping an image uploaded on the web page, call the scrapImage() method defined in the ShareClient class.


// Scraping an image

// URL of the original image.
String url =
  'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png';

try {
  // Uploading an image to the Kakao image server
  ImageUploadResult imageUploadResult =
    await ShareClient.instance.scrapImage(imageUrl: url);
  print('Succeeded in scraping an image.\n${imageUploadResult.infos.original}');
} catch (e) {
  print('Failed to scrape an image.');
}

See more