kakao map 1

kakao developers - 지도 SDK 사용
참고 : https://pub.dev/packages/kakaomap_webview

기본 설정

AndroidManifest.xml

	<!-- Internet permission is required -->
	<uses-permission android:name="android.permission.INTERNET">
    </uses-permission>
    
	<!-- Add android:usesCleartextTraffic="true" in application tag -->
    <application
  		android:label="your app name"
  		android:icon="@mipmap/ic_launcher"
  		android:usesCleartextTraffic="true">

build.gradle

android {
	compileSdkVersion 33    
    	defaultConfig{
    		minSdkVersion 21'
    	}
}

main.dart

import 'package:flutter/material.dart';
import 'package:kakaomap_webview/kakaomap_webview.dart';
const String kakaoMapKey = 'javascriptKey';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'MaterialApp',
        home: Scaffold(
          body: Column(
            children: [
              KakaoMapView(
                  width: 400,
                  height: 400,
                  kakaoMapKey: kakaoMapKey,
                  lat: 33.450701,
                  lng: 126.570667,
                  showMapTypeControl: true,
                  showZoomControl: true,
                  markerImageURL:
                  'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png',
                  onTapMarker: (message) async {
                    ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text('Marker is clicked')));

                    //await _openKakaoMapScreen(context);
                  }),
            ],
          ),
        ));
  }
}

주의!
MaterialApp 위젯을 제외하고 작성시 에러 발생

import 'package:flutter/material.dart';
import 'package:example/kakaomap_screen.dart';

const String kakaoMapKey = 'javascriptKey';

class KakaoMapTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(title: Text('Kakao map webview test')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          KakaoMapView(
              width: size.width,
              height: 400,
              kakaoMapKey: kakaoMapKey,
              lat: 33.450701,
              lng: 126.570667,
              showMapTypeControl: true,
              showZoomControl: true,
              markerImageURL:
                  'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png',
              onTapMarker: (message) async {
                ScaffoldMessenger.of(context)
                    .showSnackBar(SnackBar(content: Text('Marker is clicked')));

                //await _openKakaoMapScreen(context);
              }),
  
        ],
      ),
    );
  }
}