[flutter] 플러터 Swipeable을 이용한 지도 위 경로 표시 기능 구현 방법

08 Dec 2023

flutter

플러터(Flutter)를 사용하여 지도 위에 경로를 표시하고 Swipeable한 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 지도 표시

먼저, flutter 지도 라이브러리를 사용하여 지도를 화면에 표시합니다. 예를 들어, google_maps_flutter 라이브러리를 사용할 수 있습니다. 이 라이브러리를 사용하여 지도를 렌더링하고, 원하는 위치 및 줌 수준을 설정할 수 있습니다.

import 'package:google_maps_flutter/google_maps_flutter.dart';

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(37.7749, -122.4194),  // 초기 위치 설정
    zoom: 12.0,  // 줌 레벨 설정
  ),
  // 추가적인 설정 및 마커 표시
);

2. 경로 표시

지도 위에 경로를 표시하기 위해서는 Polyline을 사용하여 지도 상에 선을 그려 경로를 표시할 수 있습니다.

GoogleMap(
  polylines: {
    Polyline(
      polylineId: PolylineId('route1'),
      points: _createPoints(),  // 경로 좌표 설정
      color: Colors.blue,  // 선 색상 설정
      width: 5,  // 선 두께 설정
    ),
  },
  // 추가적인 설정 및 마커 표시
);

3. Swipeable한 기능 추가

경로 위에 Swipeable한 기능을 추가하기 위해서는 flutter_swiper와 같은 라이브러리를 사용하여 Swipeable한 컴포넌트를 추가할 수 있습니다. 이를 통해 사용자가 경로를 스와이프하여 다양한 정보를 확인할 수 있습니다.

Swiper(
  itemCount: 3,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      margin: EdgeInsets.all(8.0),
      child: // 각 페이지에 표시할 컨텐츠
    );
  },
  // 추가적인 설정
);

이제, 위의 방법을 활용하여 플러터를 사용하여 지도 위에 경로를 표시하고 Swipeable한 기능을 구현할 수 있습니다.

1. 지도 표시

2. 경로 표시

3. Swipeable한 기능 추가

참고