[flutter] 플러터에서 지도 위에 원(circle) 그리기

플러터에서 지도를 사용하고 원(circle)을 표시하는 방법에 대해 알아보겠습니다.

1. 구글 맵 패키지 추가

먼저, google_maps_flutter 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가해 주세요.

dependencies:
  google_maps_flutter: ^1.2.0

그리고 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치해 주세요.

2. 지도 위에 원 그리기

다음으로, GoogleMap 위에 Circle을 그리기 위해 아래와 같이 코드를 작성해 주세요.

import 'package:google_maps_flutter/google_maps_flutter.dart';

// ...

GoogleMap(
  // ...
  circles: Set.from([
    Circle(
      circleId: CircleId('circle_1'),
      center: LatLng(37.77483, -122.41942),
      radius: 1000,
      fillColor: Colors.blue.withOpacity(0.3),
      strokeWidth: 3,
      strokeColor: Colors.blue,
    ),
  ]),
)

위 코드에서 center는 원의 중심 좌표를, radius는 반지름을 나타냅니다.

3. 실행 및 확인

이제 앱을 실행하면 지도 위에 지정한 위치에 원이 그려진 것을 확인할 수 있을 것입니다.

google_maps_flutter 패키지를 사용하여 플러터 앱에서 지도 위에 원을 그리는 방법에 대해 알아보았습니다.

더 자세한 내용은 공식 문서를 참고하세요.