[flutter] 플러터에서 지도 위에 동적으로 선그리기

21 Dec 2023

flutter

플러터(Flutter)를 사용하여 지도 위에 동적으로 선을 그리고 싶다면 flutter_map 패키지를 사용할 수 있습니다. 여기에는 지도 위에 다양한 도형을 그리는 기능이 포함되어 있습니다. 먼저 flutter_map 패키지를 프로젝트에 추가하고, 해당 패키지를 사용하여 지도 위에 선을 그려보겠습니다.

1. flutter_map 패키지 추가하기

먼저 pubspec.yaml 파일에 flutter_map 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_map: any

그런 다음, 터미널에서 아래 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

2. 지도 위에 선 그리기

다음으로, 아래 코드 예제를 참고하여 지도 위에 선을 그리는 방법을 알아봅시다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('동적 선 그리기')),
        body: FlutterMap(
          options: MapOptions(
            center: LatLng(51.5, -0.09),
            zoom: 13.0,
          ),
          layers: [
            TileLayerOptions(
              urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
              subdomains: ['a', 'b', 'c']
            ),
            PolylineLayerOptions(
              polylines: [
                Polyline(
                  points: [
                    LatLng(51.5, -0.09),
                    LatLng(51.5, -0.075),
                    LatLng(51.49, -0.1),
                  ],
                  color: Colors.red,
                  strokeWidth: 4.0,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

위 예제에서 PolylineLayerOptions를 사용하여 polylines 목록에 Polyline을 추가하고, points에서 원하는 경로를 정의할 수 있습니다. 또한, color 및 strokeWidth 속성을 사용하여 선의 색상과 너비를 지정할 수 있습니다.

이제 플러터 앱에서 지도 위에 동적으로 선을 그릴 수 있습니다. 추가적으로 원하는 경로를 정의하여 지도 위에 원하는 선을 그릴 수 있습니다.

1. flutter_map 패키지 추가하기

2. 지도 위에 선 그리기

참고 자료