페이지 이동경로
  • 문서>
  • 시작하기>
  • Flutter

시작하기

Flutter

이 문서는 Kakao SDK for Flutter(이하 Flutter SDK) 사용법을 설명합니다.

기능 소개

Flutter SDK는 Flutter로 작성된 애플리케이션(이하 앱)에서 카카오 API를 편리하게 호출할 수 있도록 도와주는 SDK입니다. 현재 Android 및 iOS 앱을 정식으로 지원하며, 추후 Web 앱 또한 지원 예정입니다.

요구 사양

Flutter SDK를 사용하기 위한 최소 요구 사양은 아래와 같습니다.

  • Flutter 2.0 이상
  • Dart 2.12.0 이상
  • Android Studio 3.0 이상
  • Android 4.4(API 19) 이상
  • iOS 11 이상
참고: 외부 라이브러리 의존성

Flutter SDK는 다음 라이브러리를 사용합니다.

지원하는 웹 브라우저

Flutter SDK는 모바일, PC 웹 환경에서 다음 웹 브라우저를 지원합니다.

Browser Android iOS macOS Windows Linux
Chrome O O O** O** O**
Edge O O O O** O
Firefox O O O O O
Safari X O O X X

* Internet Explorer(IE) 미지원

** 개발 및 디버깅(Debugging) 시 기본 브라우저(Default browser)

설치

Step 1. pubspec.yaml 파일에 의존성 설정

pubspec.yaml 파일의 dependencies 하위에 다음과 같이 Flutter SDK에 대한 의존성을 추가합니다. 전체 설치 또는 필요한 패키지 선택 설치가 가능합니다. 설정 추가 시 들여 쓰기에 주의합니다.

dependencies:
  kakao_flutter_sdk: ^1.3.0-beta.3 # 전체 추가
  kakao_flutter_sdk_user: ^1.3.0-beta.3 # 카카오 로그인
  kakao_flutter_sdk_talk: ^1.3.0-beta.3 # 카카오톡(소셜, 메시지)
  kakao_flutter_sdk_story: ^1.3.0-beta.3 # 카카오스토리
  kakao_flutter_sdk_share: ^1.3.0-beta.3 # 카카오톡 공유
  kakao_flutter_sdk_navi: ^1.3.0-beta.3 # 카카오내비
웹 지원 안내

Flutter SDK 1.3.0 버전부터 웹 애플리케이션(Web application)을 정식 지원합니다. 베타(Beta) 버전에서는 일부 기능이 정상 동작하지 않을 수 있으며, 데브톡에서 베타 버전 관련 문의나 제보가 가능합니다.

카카오톡 공유 패키지명 변경

카카오톡 공유 패키지명이 1.2.0 버전부터 변경되었습니다. 아래 내용과 공지사항을 참고합니다. - 1.2.0 미만 버전: kakao_flutter_sdk_link - 1.2.0 이상 버전: kakao_flutter_sdk_share

Step 2. Flutter SDK 설치

[Flutter commands] 바의 [Pub get] 버튼을 눌러 Flutter SDK를 설치합니다.

정식 서비스 시 변경 사항

Flutter SDK 0.9.0 이하 버전을 사용하고 있었다면, 최신 버전 업데이트 시 Flutter 마이그레이션을 참고하여 변경 사항을 적용해야 합니다.

참고: 패키지 의존성

Kakao SDK의 일부 패키지는 다른 패키지에 의존성이 있으며, 각 패키지는 설치 시 의존하는 패키지를 자동으로 함께 설치합니다. 패키지 의존성 구조는 아래 이미지를 참고합니다.

패키지 의존성 구조도

설정

[내 애플리케이션] > [플랫폼]에서 플랫폼 정보를 등록합니다. 아래 내용을 참고해 서비스가 지원하는 플랫폼의 정보를 등록합니다.

  • 네이티브 앱만 서비스: Android, iOS 플랫폼 정보 등록 필요
  • 웹만 서비스: Web 플랫폼 정보 등록 필요
  • 네이티브 앱, 웹 모두 서비스: Android, iOS, Web 플랫폼 정보 등록 필요

이 설정은 Flutter SDK를 통해 카카오 API를 사용하려면 필수입니다. 자세한 안내는 플랫폼 등록을 참고합니다.

참고: 번들 ID 확인 방법

iOS 플랫폼 등록 시 필요한 앱의 번들 ID는 Xcode의 [Target] > [General] > [Bundle Identifier]에서 확인할 수 있습니다. Xcode에서 프로젝트를 직접 열거나, ${Project} > ios 폴더에 마우스 우클릭하여 Xcode를 통해 프로젝트를 열 수 있습니다. 아래 이미지를 참고합니다.

초기화

설치설정을 완료했다면, 초기화를 거쳐 Flutter SDK를 사용할 수 있습니다.

아래 예제를 참고하여 main() 함수 안에서 Flutter SDK 초기화 메서드인 init() 메서드를 호출합니다. runApp() 메서드 호출 전 Flutter SDK를 초기화해야 한다는 점에 주의합니다.

초기화 시 [내 애플리케이션] > [앱 키]에서 확인한 앱 키를 입력해야 합니다. init() 메서드 호출 시 다음 내용을 참고해 필요한 앱 키를 전달합니다.

  • 네이티브 앱만 서비스
    • 네이티브 앱 키를 사용해 모든 카카오 API 호출
    • init() 호출 시 nativeAppKey 파라미터로 네이티브 앱 키 전달
  • 웹만 서비스
    • JavaScript 키를 사용해 모든 카카오 API 호출
    • init() 호출 시 javaScriptAppKey 파라미터로 JavaScript 키 전달
  • 웹, 네이티브 앱 모두 서비스
    • JavaScript 키를 사용해 일부 카카오 API 호출, 네이티브 앱 키와 JavaScript 키 모두 필요
    • init() 호출 시 nativeAppKey 파라미터로 네이티브 앱 키, javaScriptAppKey 파라미터로 JavaScript 키 각각 전달
import 'package:kakao_flutter_sdk_common/kakao_flutter_sdk_common.dart';

void main() {
    ...
    // 웹 환경에서 카카오 로그인을 정상적으로 완료하려면 runApp() 호출 전 아래 메서드 호출 필요
    WidgetsFlutterBinding.ensureInitialized();

    // runApp() 호출 전 Flutter SDK 초기화
    KakaoSdk.init(
        nativeAppKey: '${YOUR_NATIVE_APP_KEY}',
        javaScriptAppKey: '${YOUR_JAVASCRIPT_APP_KEY}',
    );
    runApp(MyApp());
    ...
}

하이브리드 앱 가이드

하이브리드 애플리케이션(이하 하이브리드 앱) 내 웹 페이지에서 Flutter SDK 사용 시, 웹뷰(WebView)에서 Flutter SDK가 올바르게 동작하도록 하려면 추가 조치가 필요합니다. 필요한 조치 사항은 Kakao SDK for JavaScript와 동일하므로, JavaScript를 참고하여 조치합니다.

더보기