[flutter] 리버포드를 활용한 플러터 앱의 지도 표시 기능 구현

21 Dec 2023

flutter

리버포드는 매우 강력한 지도 관련 프레임워크로, 플러터(Flutter) 앱에서 다양한 지도 기능을 구현하는 데 사용됩니다. 이번 게시물에서는 리버포드를 활용하여 플러터 앱에 지도 표시 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 리버포드 패키지 추가

먼저, pubspec.yaml 파일에 리버포드 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_map: ^0.14.0
  location: ^4.3.0

위의 코드에서 flutter_map은 리버포드를 사용하기 위한 패키지이며, location은 사용자의 위치를 가져오기 위해 필요한 패키지입니다. 패키지를 추가한 후에는 flutter pub get 명령어를 사용하여 패키지를 다운로드합니다.

2. 지도 위젯 추가

다음으로, 앱의 화면에 지도를 표시하기 위해 리버포드의 FlutterMap 위젯을 추가합니다.

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        center: LatLng(37.7749, -122.4194),
        zoom: 13.0,
      ),
      layers: [TileLayerWidget(
        options: TileLayerOptions(
          urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c'],
        ),
      )],
    );
  }
}

위의 코드에서 FlutterMap 위젯을 사용하여 기본 지도를 표시하고 있습니다. MapOptions를 통해 초기 지도의 중심 좌표와 확대/축소 수준을 설정할 수 있으며, TileLayerOptions를 통해 지도 타일의 소스를 지정할 수 있습니다.

3. 사용자 위치 가져오기

마지막으로, 사용자의 위치를 가져와 지도 상에 표시할 수 있습니다. 해당 기능을 구현하기 위해서는 location 패키지를 사용합니다.

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';
import 'package:location/location.dart';

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  MapController mapController = MapController();
  Location location = Location();
  LatLng _center;

  @override
  void initState() {
    super.initState();
    location.onLocationChanged.listen((locationData) {
      setState(() {
        _center = LatLng(locationData.latitude, locationData.longitude);
        mapController.move(_center, 13.0);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      mapController: mapController,
      options: MapOptions(
        center: _center ?? LatLng(37.7749, -122.4194),
        zoom: 13.0,
      ),
      layers: [TileLayerWidget(
        options: TileLayerOptions(
          urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c'],
        ),
      )],
    );
  }
}

위의 코드에서 location 패키지를 사용하여 사용자의 위치를 가져오고, 사용자의 위치가 변경될 때마다 지도를 해당 위치로 이동시키고 있습니다.

마치며

이렇게 리버포드를 활용하여 플러터 앱에서 지도 표시 기능을 구현할 수 있습니다. 사용자 위치를 가져와 지도 위에 표시함으로써, 더 다양하고 유용한 지도 기능을 제공할 수 있습니다.

참고: flutter_map 패키지, location 패키지