[flutter] 플러터에서 지도 위에 선 그리기

21 Dec 2023

flutter

구글맵 의존성 추가

먼저, pubspec.yaml 파일에 구글맵 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.6

이후에 패키지를 업데이트합니다.

$ flutter pub get

구글맵 위에 폴리라인 그리기

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter - 지도에 폴리라인 그리기'),
        ),
        body: const MapWithPolyline(),
      ),
    );
  }
}

class MapWithPolyline extends StatelessWidget {
  const MapWithPolyline({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      initialCameraPosition: const CameraPosition(
        target: LatLng(37.7749, -122.4194),
        zoom: 12,
      ),
      polylines: {
        Polyline(
          polylineId: const PolylineId('route1'),
          color: Colors.blue,
          width: 3,
          points: const [
            LatLng(37.7749, -122.4194),
            LatLng(37.7604, -122.4465),
            LatLng(37.7735, -122.4574),
          ],
        ),
      },
    );
  }
}

이 예제에서는 google_maps_flutter 패키지를 사용하여 폴리라인을 지도 위에 그리는 방법을 보여줍니다. 위 예제를 실행하면 앱 화면에 산프란시스코 근처의 지도가 표시되고, 이어지는 세 지점을 연결한 파란색 폴리라인이 그려집니다.

자세한 내용은 구글맵 플러그인 문서를 참고하시기 바랍니다.