[Dart, Flutter] Flutter_Map Package 사용하기

Flutter 에는 다양한 Map API 들이 존재하는데 그중 Flutter_Map 이라는 Package를 알아보자.

 

사전준비부터 알아보자.

먼저 Pubspec.yaml 파일에 해당 package를 적으면 사용이 가능하다.

  flutter_map: ^6.0.0
  latlong2: ^0.9.0

 

latlong2 패키지 같은 경우, flutter_map은 위도, 경도 좌표를 기반으로 Map에 Marker를 생성하는 latlong2 패키지는 위도,경도를 가진 자료형을 지원하는 package라고 생각하면 되겠다.

• Android의 경우 AndroidManifest.xml 파일에 다음과 같은 코드를 넣어준다.

<uses-permission android:name="android.permission.INTERNET"/>

 

기본적인 코드는 다음과 같다. 의외로 간단하다.

import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

@override
Widget build(BuildContext context) {
  return FlutterMap(
    options: MapOptions(
      initialCenter: LatLng(51.509364, -0.128928), // 좌표는 원하는 좌표로 설정
      initialZoom: 9.2,
    ),
    children: [
      TileLayer(
        urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
        userAgentPackageName: 'com.example.app',
      ),
    ],
  );
}

 

 

iOS 기준 실행화면

 

왜 런던이냐면 initialCenter에 나와있는 저 좌표가 런던의 좌표이기 때문이다.

 

다음글에서는 초기 위치를 현재 위치로 받아오는 방법을 설명하겠습니다.

 

참고자료: https://docs.fleaflet.dev/