[flutter] 플러터에서 지도에 경로(route) 표시하기

21 Dec 2023

flutter

플러터(Flutter) 애플리케이션에서 지도에 경로(route)를 표시하는 것은 매우 일반적인 요구사항입니다. 이 기술 블로그에서는 플러터를 사용하여 지도에 경로를 표시하는 방법에 대해 알아보겠습니다.

1. 구글 맵 플러터 패키지 설치

먼저, 플러터 애플리케이션에서 지도를 표시하기 위해 구글 맵 플러터 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.10

이후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

2. 지도 위에 경로 표시

구글 맵 플러터 패키지를 사용하여 지도 위에 경로를 표시하려면 GoogleMap 위젯을 사용하고 Polyline을 추가해야 합니다. 아래는 간단한 예시입니다:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: LatLng(37.7749, -122.4194),
            zoom: 12,
          ),
          polylines: {
            Polyline(
              polylineId: PolylineId('route1'),
              color: Colors.blue,
              points: _createPoints(),
            ),
          },
        ),
      ),
    );
  }

  List<LatLng> _createPoints() {
    // 경로 좌표를 생성하는 로직을 구현합니다.
    return <LatLng>[
      LatLng(37.7749, -122.4194),
      LatLng(37.4043, -122.0748),
      LatLng(37.3382, -121.8863),
    ];
  }
}

위의 코드는 GoogleMap 위젯을 사용하여 지도를 표시하고, Polylines를 사용하여 경로를 표시합니다.

3. 추가 기능 구현

경로 표시에 추가적인 기능을 구현할 수 있습니다. 예를 들어, 사용자 위치를 기반으로 실시간으로 경로를 업데이트하거나, 경로에 마커를 추가하여 출발지, 도착지를 표시할 수 있습니다.

플러터를 사용하여 지도에 경로를 표시하는 방법에 대해 알아보았습니다. 이외에도 다양한 기능을 추가하여 보다 풍부한 지도 경험을 제공할 수 있습니다.

더 많은 세부사항과 고급 기능에 대해서는 구글 맵 플러터 패키지의 공식 문서를 참고하시기 바랍니다.

이상으로, 지도에 경로를 표시하는 방법에 대한 간단한 개요를 마치겠습니다. 감사합니다!