[flutter] 플러터에서 지도에 동적으로 정보 창 전환하기

21 Dec 2023

flutter

플러터를 사용하여 지도를 표시하고 사용자가 지도 위의 마커를 선택했을 때 동적으로 정보 창을 전환하는 방법에 대해 알아보겠습니다.

지도 위에 마커 표시하기

먼저 google_maps_flutter 패키지를 이용하여 플러터 앱에 지도를 표시합니다. 마커를 추가하여 지도 위에 특정 위치를 표시할 수 있습니다. 다음은 간단한 예제 코드입니다.

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

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController mapController;
  Set<Marker> markers = Set();

  @override
  void initState() {
    super.initState();
    markers.add(Marker(
      markerId: MarkerId('marker_1'),
      position: LatLng(37.7749, -122.4194),
      onTap: () {
        // TODO: 마커를 탭했을 때 동적으로 정보 창 전환
      },
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('지도'),
      ),
      body: GoogleMap(
        markers: markers,
        onMapCreated: (GoogleMapController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(37.7749, -122.4194),
          zoom: 12,
        ),
      ),
    );
  }
}

마커를 탭했을 때 정보 창 전환하기

마커를 탭했을 때 동적으로 정보 창을 전환하기 위해 infoWindow 속성을 활용할 수 있습니다. Marker 객체를 생성할 때 infoWindow 속성을 설정하여 마커를 탭했을 때 정보 창을 표시할 수 있습니다. 다음은 예제 코드입니다.

markers.add(Marker(
  markerId: MarkerId('marker_1'),
  position: LatLng(37.7749, -122.4194),
  infoWindow: InfoWindow(
    title: '마커 정보',
    snippet: '설명 및 상세 정보',
  ),
  onTap: () {
    setState(() {
      markers.removeWhere((m) => m.markerId.value == 'marker_1');
      markers.add(Marker(
        markerId: MarkerId('marker_1'),
        position: LatLng(37.7749, -122.4194),
        infoWindow: InfoWindow(
          title: '새로운 정보',
          snippet: '새로운 설명 및 상세 정보',
        ),
      ));
    });
  },
));

위 코드에서 onTap 콜백 함수 내에서 setState를 호출하여 지도에 표시되는 마커를 업데이트합니다. 이렇게 하면 사용자가 마커를 탭할 때마다 정보 창의 내용이 동적으로 변경됩니다.

이제 위의 예제를 참고하여 플러터 앱에서 지도에 동적으로 정보 창을 전환하는 기능을 구현해 보세요!