[flutter] 플러터에서 Visibility를 이용한 마커 표시하기

18 Dec 2023

flutter

소개

플러터(Flutter)는 구글에서 개발한 오픈 소스 프레임워크로, 휴대폰, 웹 및 데스크톱용 애플리케이션을 개발하는 데 사용되는 툴킷입니다. 복잡한 UI를 작성하고 관리하는 데 유용한 다양한 위젯을 제공합니다.

이번 글에서는 플러터의 Visibility 위젯을 활용하여 지도 애플리케이션에서 마커를 표시하는 방법에 대해 알아보겠습니다.

Visibility 위젯

Visibility 위젯은 자식 위젯을 보이거나 숨길 때 사용됩니다. visible과 invisible 두 가지 속성을 가지고 있어, 조건부 렌더링에 유용하게 활용될 수 있습니다.

마커 표시하기

플러터에서 지도에 마커를 표시하려면 google_maps_flutter 패키지를 사용할 수 있습니다. 마커를 조건부로 표시하려면 Visibility 위젯을 활용하면 됩니다.

다음은 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: Scaffold(
        appBar: AppBar(
          title: Text('마커 표시 예제'),
        ),
        body: MapWithMarker(),
      ),
    );
  }
}

class MapWithMarker extends StatefulWidget {
  @override
  _MapWithMarkerState createState() => _MapWithMarkerState();
}

class _MapWithMarkerState extends State<MapWithMarker> {
  GoogleMapController mapController;
  bool markerVisible = true;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        GoogleMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: CameraPosition(
            target: LatLng(37.7749, -122.4194),
            zoom: 12.0,
          ),
          markers: markerVisible ? _createMarkers() : Set<Marker>(),
        ),
        Positioned(
          top: 20,
          right: 20,
          child: FloatingActionButton(
            onPressed: () {
              setState(() {
                markerVisible = !markerVisible;
              });
            },
            child: Icon(Icons.visibility),
          ),
        ),
      ],
    );
  }

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  Set<Marker> _createMarkers() {
    return <Marker>[
      Marker(
        markerId: MarkerId('marker_1'),
        position: LatLng(37.7749, -122.4194),
        infoWindow: InfoWindow(
          title: 'San Francisco',
        ),
      ),
    ].toSet();
  }
}

위 예제 코드에서, Visibility 위젯을 사용하여 markerVisible 상태에 따라 마커를 보이거나 숨길 수 있습니다. 버튼을 클릭하면 마커의 Visibility가 변경되는 것을 확인할 수 있습니다.

실제 애플리케이션에서는 이와 같은 방식으로 조건에 따라 마커를 동적으로 표시하거나 숨길 수 있습니다.

결론

플러터의 Visibility 위젯을 이용하여 지도 애플리케이션에서 마커를 표시하는 방법에 대해 알아보았습니다. 이를 응용하여 동적으로 UI를 구성하는 다양한 애플리케이션을 개발할 수 있습니다.

플러터 공식 문서나 스택 오버플로우 등을 통해 자세한 내용을 확인할 수 있습니다.