[flutter] 플러터에서 지도에 라벨(label) 표시하기

21 Dec 2023

flutter

플러터(Flutter)를 사용하여 지도 위에 특정 위치에 라벨(label)을 표시하는 방법에 대해 알아보겠습니다.

Google Maps 플러그인 추가

먼저 google_maps_flutter 플러그인을 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 해당 플러그인을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^1.2.0

이후 터미널에서 flutter pub get 명령어를 실행하여 플러그인을 다운로드 받습니다.

지도 위에 라벨 표시

아래는 GoogleMap 위에 라벨을 표시하는 예제 코드입니다.

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(MapLabel());

class MapLabel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Map with Label'),
        ),
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: LatLng(37.7749, -122.4194),
            zoom: 12,
          ),
          markers: Set<Marker>.of([
            Marker(
              markerId: MarkerId('marker_1'),
              position: LatLng(37.7749, -122.4194),
              infoWindow: InfoWindow(title: 'San Francisco'),
            ),
          ]),
        ),
      ),
    );
  }
}

위 코드에서 InfoWindow를 사용하여 라벨을 추가할 수 있습니다. infoWindow 속성을 활용하여 해당 위치에 라벨을 표시할 수 있습니다.

결론

플러터를 사용하여 지도에 라벨을 표시하는 간단한 방법에 대해 알아보았습니다. 이를 통해 사용자에게 지도 위의 특정 위치를 더 쉽게 인식할 수 있도록 도움을 줄 수 있습니다.

더 많은 기능을 추가하고 싶다면 공식 문서를 참고하시기 바랍니다.