[flutter] 플러터에서 지도 위에 네모 상자(addrectangle) 그리기

21 Dec 2023

flutter

플러터를 사용하여 지도 앱을 개발 중이고, 지도 위에 사용자 정의 영역을 표시하고 싶다면, addrectangle 메서드를 사용하여 지도 위에 네모 상자를 그릴 수 있습니다.

구현 방법

먼저, google_maps_flutter 패키지를 이용해 지도를 표시하고, 지도 위에 네모 상자를 그리기 위해 polygon 옵션을 사용합니다.

다음은 간단한 예제 코드입니다.

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: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  GoogleMapController mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        onMapCreated: (controller) {
          setState(() {
            mapController = controller;
          });
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(37.7749, -122.4194),
          zoom: 12,
        ),
        polygons: {
          Polygon(
            polygonId: PolygonId('rectangle'),
            points: [
              LatLng(37.78825, -122.4324),
              LatLng(37.78825, -122.4194),
              LatLng(37.7749, -122.4194),
              LatLng(37.7749, -122.4324),
            ],
            strokeWidth: 2,
            strokeColor: Colors.red,
            fillColor: Colors.blue,
          ),
        },
      ),
    );
  }
}

위의 코드에서, polygons 속성에 Polygon을 추가함으로써, 지도 위에 네모 상자를 그릴 수 있습니다. 각 LatLng은 상자의 꼭지점을 나타내며, strokeWidth, strokeColor, fillColor로 선 스타일 및 채우기 색상을 설정할 수 있습니다.

마치며

위의 예제 코드를 사용하면 플러터 앱에서 지도 위에 네모 상자를 그릴 수 있습니다. 이를 응용하여 사용자 정의 지역을 표시하거나 다양한 기능을 추가할 수 있습니다.