[flutter] 플러터에서 Visibility를 이용한 맵 레이어 토글하기

18 Dec 2023

flutter

플러터 앱에서 지도를 사용할 때 특정 레이어를 보이거나 숨기고 싶을 때가 있습니다. 이를 위해서 Visibility 위젯을 사용하여 맵 레이어를 토글할 수 있습니다.

1. 맵 추가하기

먼저, 플러터 프로젝트에 맵을 추가해야 합니다. 이를 위해 다음과 같은 패키지를 사용할 수 있습니다.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^1.2.0

이후, 맵 위에 레이어를 추가하여 원하는 정보를 표시할 수 있습니다.

2. Visibility 위젯 사용하기

맵 레이어를 토글하기 위해서는 Visibility 위젯을 활용할 수 있습니다. 다음은 Visibility 위젯을 사용하여 맵 레이어를 토글하는 예제 코드입니다.

bool _showLayer = true;

Stack(
  children: <Widget>[
    GoogleMap(
      // 맵 설정
    ),
    Positioned(
      top: 10,
      right: 10,
      child: FloatingActionButton(
        onPressed: () {
          setState(() {
            _showLayer = !_showLayer;
          });
        },
        backgroundColor: Colors.white,
        child: Icon(
          _showLayer ? Icons.visibility : Icons.visibility_off,
          color: Colors.black,
        ),
      ),
    ),
    Positioned(
      top: 70,
      right: 10,
      child: Visibility(
        visible: _showLayer,
        child: Container(
          // 레이어 설정
        ),
      ),
    ),
  ],
)

위 코드에서 Visibility 위젯을 사용하여 맵 레이어를 표시하거나 숨길 수 있습니다.

위의 예제 코드는 맵 위에 플로팅 액션 버튼을 추가하고, 버튼을 누를 때마다 Visibility 위젯을 통해 레이어의 가시성을 토글합니다.

결론

플러터에서는 Visibility 위젯을 사용하여 맵 레이어를 쉽게 토글할 수 있습니다. 이를 활용하여 사용자가 필요에 따라 원하는 정보를 빠르게 표시하거나 숨길 수 있습니다.

이러한 기능은 사용자 경험을 향상시키고, 지도 앱의 유용성을 높일 수 있습니다.

내용이 확실하지 않으면 여기는 취소합니다