[flutter] Swipeable Widget을 활용한 맵 이동 기능 구현하기

08 Dec 2023

flutter

이번 포스트에서는 Flutter 앱에서 Swipeable Widget을 활용하여 맵 이동 기능을 구현하는 방법에 대해 알아보겠습니다. Swipeable Widget은 사용자의 제스처에 따라 동작하는 위젯으로, 이를 활용하여 맵을 스와이프하여 이동하는 기능을 구현할 것입니다.

Swipeable Widget은 사용자의 터치 제스처에 반응하여 동작하는 위젯으로, 터치 이벤트에 따라 움직이거나 행동하는 기능을 구현할 수 있습니다. 이를 활용하여 맵을 Swipe하여 이동하는 기능을 구현할 것입니다.

2. 맵 이동 기능 구현하기

먼저, Flutter 프로젝트에 필요한 패키지를 설치합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_map: ^0.13.0
  swipeable: ^0.3.3

다음으로, Swipeable Widget을 사용하여 맵을 드래그하여 이동할 수 있도록 구현합니다.

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:swipeable_tile/swipeable_tile.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Map with Swipeable Widget',
      home: MapPage(),
    );
  }
}

class MapPage extends StatelessWidget {
  final MapController mapController = MapController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map with Swipeable Widget'),
      ),
      body: SwipeableTile(
        child: FlutterMap(
          options: MapOptions(
            center: LatLng(51.5, -0.09),
            zoom: 13.0,
            swipeToMove: true, // enable swipe to move
          ),
          layers: [
            TileLayerOptions(
              urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
              subdomains: ['a', 'b', 'c'],
            ),
          ],
          mapController: mapController,
        ),
      ),
    );
  }
}

위 코드는 Swipeable Widget과 함께 Flutter Map 패키지를 활용하여 맵을 구현한 예시입니다. SwipeableTile을 사용하여 맵을 드래그하여 이동할 수 있도록 설정하고, FlutterMap을 사용하여 지도를 표시합니다.

마치며

이렇듯 Swipeable Widget을 활용하여 맵 이동 기능을 구현할 수 있습니다. 제스처에 따라 동작하는 위젯을 활용하여 사용자 경험을 향상시키는 다양한 기능들을 구현할 수 있으니 참고하시기 바랍니다.

더 많은 정보는 Swipeable 패키지와 Flutter Map 패키지를 참고하시기 바랍니다.

1. Swipeable Widget 이해하기

2. 맵 이동 기능 구현하기

마치며