flutter_kakao_map 0.0.4 flutter_kakao_map: ^0.0.4 copied to clipboard
A Flutter plugin for using the native Kakao Maps SDKs on Android and iOS.
Kakao Maps for Flutter #
Kakao Maps This is a Flutter plugin that provides a widget.
Guide #
The plugin relies on the Flutter framework for use on Android and iOS. There is currently no completion stage.
If you have any problems, please register as a problem or Pull Requset.
The DaumMap framework can only be tested on real devices in Android.
To use this plugin, iOS must select the built-in view preview in the following ways.
Add a boolean property to the app's Info.plist
file using the key "io.flutter.embedded_views_preview"
And the value is YES.
The API exposed by this plugin is not yet stable and its specification can be changed.
How to use #
To use this plugin, add flutter_kakao_map
to Dependencies of pubspec.yaml file.
Start #
-
Kakao Map Android API is available if you have to issue an application key and register the key hash. For that, you need a Kakao account.
- Register the developer and create an application on Kakao Developers Console.
- Select a project to enable Kakao Maps.
- Register Android and iOs in “Platform” from the Kakao Maps menu.
- Android requires the values of the app to match, and it works properly.
-
Please refer to Kakao Maps API Key Registration Settings for more information. here
Android #
Specify the API key in the application manifest. android/app/src/main/AndroidManifest.xml
:
<manifest ...
>
<! -Internet available->
<Application
Android:usesCleartextTraffic="true"
>
<! -Add cacao APP KEY->
<Meta-data
Android:name="com.kakao.sdk.AppKey"
Android:value="[API_KEY]"/>
In the main activity of your application, you will add code.
import com.yoonjaepark.flutter_kakao_map.FlutterKakaoMapPlugin;
//Change
import io.flutter.app.FlutterActivity;
public class MainActivity extends FlutterActivity {
//add to
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
FlutterKakaoMapPlugin.registerWith(registrarFor("com.yoonjaepark.flutter_kakao_map.FlutterKakaoMapPlugin"));
}
}
iOS #
It is necessary to add Framework used by DaumMap Framework to Target of the project.
- OpenGL ES.framework
- systemconfiguration.framework
- CoreLocation.framework
- QuartzCore.framework
- libc ++ tbd
- libxml2.tbd
- libsqlite3.tbd
Add a Boolean property to your app's Info.plist
file to select the built-in view preview.
Set the key io.flutter.embedded_views_preview
and the value of" YES "and enter the API key value.
<key>KAKAO_APP_KEY</key>
<string>[APP_KEY]</string>
<key>io.flutter.embedded_views_preview</key>
<true/>
In the terminal go to the project and ios folder and enter pod install.
How to use #
You can now add the FlutterKakaoMap
widget to your widget tree.
You can use the delivered KakaoMapViewController
to control the map view.
The onMapCreated
callback of FlutterKakaoMap
.
Sample Usage #
import 'package:flutter/material.dart';
import 'package:flutter_kakao_map/flutter_kakao_map.dart';
import 'package:flutter_kakao_map/kakao_maps_flutter_platform_interface.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyAppOne(),
);
}
}
class MyAppOne extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyAppOne> {
KakaoMapController mapController;
MapPoint _visibleRegion = MapPoint(37.5087553, 127.0632877);
CameraPosition _kInitialPosition =
CameraPosition(target: LatLng(37.5087553, 127.0632877), zoom: 5);
void onMapCreated(KakaoMapController controller) async {
final MapPoint visibleRegion = await controller.getMapCenterPoint();
setState(() {
mapController = controller;
_visibleRegion = visibleRegion;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter KakaoMap example')),
body: Column(
children: [
Center(
child: SizedBox(
width: 300.0,
height: 200.0,
child: KakaoMap(
onMapCreated: onMapCreated,
initialCameraPosition: _kInitialPosition)))
],
),
);
}
}
See the example
directory for a complete sample app.