[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
패키지를 사용하여 플러터 앱에서 지도 위에 원을 그리는 방법에 대해 알아보았습니다.
더 자세한 내용은 공식 문서를 참고하세요.