[flutter] BottomSheet와 함께 사용하는 맵 위젯

14 Dec 2023

flutter

BottomSheet는 Flutter 앱에서 화면 하단에 추가 정보를 표시하기 위한 효과적인 방법입니다. 맵 위젯과 함께 사용하면 사용자가 지도 위의 추가 정보를 쉽게 확인할 수 있습니다.

이 튜토리얼에서는 BottomSheet를 사용하여 맵 위젯과 상호 작용할 수 있는 방법에 대해 살펴보겠습니다.

맵 위젯 추가하기

우선, 맵과 관련된 Flutter 패키지를 추가해야 합니다. Google Maps Flutter 패키지를 사용하여 맵을 쉽게 표시할 수 있습니다.

dependencies:
  google_maps_flutter: any

이제, 맵 위젯을 화면에 추가해 보겠습니다.

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('Map with BottomSheet'),
        ),
        body: MapWidget(),
      ),
    );
  }
}

class MapWidget extends StatefulWidget {
  @override
  _MapWidgetState createState() => _MapWidgetState();
}

class _MapWidgetState extends State<MapWidget> {
  final Set<Marker> _markers = {};

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      initialCameraPosition: CameraPosition(
        target: LatLng(37.7749, -122.4194),
        zoom: 12,
      ),
      markers: _markers,
    );
  }
}

위 코드는 앱의 홈 화면에 맵 위젯을 추가하는 예제입니다.

BottomSheet 추가하기

이제 BottomSheet를 활용하여 사용자가 맵 위의 추가 정보를 확인할 수 있는 방법을 살펴보겠습니다.

class MapWidget extends StatefulWidget {
  @override
  _MapWidgetState createState() => _MapWidgetState();
}

class _MapWidgetState extends State<MapWidget> {
  final Set<Marker> _markers = {};
  bool _bottomSheetVisible = false;

  void _showBottomSheet() {
    setState(() {
      _bottomSheetVisible = true;
    });
  }

  void _hideBottomSheet() {
    setState(() {
      _bottomSheetVisible = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          GoogleMap(
            initialCameraPosition: CameraPosition(
              target: LatLng(37.7749, -122.4194),
              zoom: 12,
            ),
            markers: _markers,
          ),
          Visibility(
            visible: _bottomSheetVisible,
            child: DraggableScrollableSheet(
              initialChildSize: 0.3,
              minChildSize: 0.1,
              maxChildSize: 0.8,
              builder: (BuildContext context, ScrollController scrollController) {
                return Container(
                  color: Colors.white,
                  child: ListView.builder(
                    controller: scrollController,
                    itemCount: 10,
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(
                        title: Text('Item $index'),
                      );
                    },
                  ),
                );
              },
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _bottomSheetVisible ? _hideBottomSheet : _showBottomSheet,
        tooltip: _bottomSheetVisible ? 'Hide' : 'Show',
        child: Icon(_bottomSheetVisible ? Icons.arrow_downward : Icons.arrow_upward),
      ),
    );
  }
}

위 코드에서 MapWidget의 build 메서드에서는 Scaffold의 body에 GoogleMap을 추가하고, Visibility 위젯을 사용하여 BottomSheet를 표시하거나 숨길 수 있도록 구성했습니다.

BottomSheet가 보이거나 숨겨지도록 하는 floatingActionButton도 추가했습니다.

이제, 맵 위에서 BottomSheet를 사용하여 추가 정보를 표시할 수 있습니다.

Flutter에서 BottomSheet를 사용하여 맵 위젯과의 상호작용을 향상시킬 수 있습니다. 기능적인 면뿐만 아니라 UI/UX 측면에서도 사용자에게 좋은 경험을 제공할 수 있습니다.

위 코드는 기본적인 예제일 뿐이며, 실제 앱에서는 추가적인 기능이나 UI/UX 관련 작업이 필요할 수 있습니다.