[flutter] 플러터에서 지도 위에 기기 방향에 따라 마커 회전하기

21 Dec 2023

flutter

플러터를 사용하여 모바일 앱을 개발할 때 지도에 사용자의 위치를 표시하기 위해 마커를 사용하는 경우가 많습니다. 또한, 사용자의 기기 방향에 따라 마커를 회전하여 실시간으로 위치 정보를 제공하는 기능이 요구될 수 있습니다.

이번 포스팅에서는 플러터에서 지도 위에 마커를 표시하고 기기의 방향에 따라 마커를 동적으로 회전하는 방법에 대해 알아보겠습니다.

1. 마커 회전을 지원하는 패키지 설치

첫 번째 단계로, 마커 회전을 지원하는 패키지를 설치해야 합니다. flutter_map은 플러터에서 지도를 사용하고 마커를 표시하는 데 사용되는 인기있는 패키지 중 하나입니다. 또한, flutter_compass 패키지를 사용하여 사용자의 기기 방향을 얻을 수 있습니다.

다음 명령어를 사용하여 두 패키지를 설치합니다.

flutter pub add flutter_map
flutter pub add flutter_compass

2. 지도에 마커 표시 및 회전 구현

다음으로는 지도에 마커를 표시하고 기기의 방향에 따라 마커를 회전하는 코드를 구현해야 합니다. 아래 예제는 지도 위에 마커를 추가하고, 기기의 방향에 따라 마커를 회전하는 방법을 보여줍니다.

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _heading = 0.0;

  @override
  void initState() {
    super.initState();
    FlutterCompass.events.listen((event) {
      setState(() {
        _heading = event.heading; // 기기의 방향 정보 업데이트
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: FlutterMap(
          options: MapOptions(
            center: LatLng(51.5, -0.09), // 지도 중심 좌표 설정
            zoom: 13.0, // 지도 줌 레벨 설정
          ),
          layers: [
            TileLayerOptions(
              urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
              subdomains: ['a', 'b', 'c'],
            ),
            MarkerLayerOptions(
              markers: [
                Marker(
                  width: 80.0,
                  height: 80.0,
                  point: LatLng(51.5, -0.09), // 마커 좌표 설정
                  builder: (ctx) => Transform.rotate(
                    angle: _heading, // 마커를 기기 방향에 따라 동적으로 회전
                    child: Icon(
                      Icons.location_on,
                      color: Colors.red,
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 FlutterCompass.events를 사용하여 기기의 방향 정보를 구독하고, Marker 위젯에서 Transform.rotate를 사용하여 마커를 회전시킵니다.

이렇게하면 플러터에서 지도 위에 마커를 표시하고 기기의 방향에 따라 마커를 동적으로 회전시킬 수 있습니다.

결론

이번 포스팅에서는 플러터를 사용하여 지도 위에 마커를 표시하고 기기의 방향에 따라 마커를 동적으로 회전하는 방법에 대해 알아보았습니다. 이를 통해 사용자에게 보다 정확하고 직관적인 지도 및 위치 정보를 제공할 수 있습니다.