[flutter] 플러터 velocity_x에서 제공하는 GPS 및 지도 서비스 활용 방법

14 Dec 2023

flutter

플러터(Flutter) 앱에서 GPS 및 지도 서비스를 활용하려면 velocity_x 패키지를 사용할 수 있습니다. velocity_x는 플러터 개발을 보다 쉽고 빠르게 할 수 있도록 다양한 유틸리티 및 확장 기능을 제공하는 패키지입니다. 이제 velocity_x를 사용하여 GPS 위치 정보를 가져오고 지도에 표시하는 방법을 알아보겠습니다.

1. GPS 위치 정보 가져오기

먼저, velocity_x 패키지를 프로젝트에 추가해야 합니다. 이를 위해 pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  velocity_x: ^4.0.0

패키지를 추가한 후에는 pubspec.yaml 파일이 있는 위치로 이동하여 다음 명령을 실행하여 패키지를 설치합니다.

flutter pub get

그런 다음, GPS 위치 정보를 가져오고 해당 정보를 활용하는 방법은 아래와 같습니다.

import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';
import 'package:geolocator/geolocator.dart';

class MyLocationWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return VxBuilder(
      builder: (context, _) {
        final position = context.select((GeolocatorService geolocator) => geolocator.position);
        return Text('현재 위치: ${position.latitude}, ${position.longitude}');
      },
    );
  }
}

VxBuilder 위젯을 사용하여 위치 정보가 업데이트될 때마다 화면이 자동으로 갱신될 수 있도록 할 수 있습니다.

2. 지도에 위치 표시하기

GPS 위치 정보를 가져왔다면, 해당 위치를 지도상에 표시하는 방법을 알아보겠습니다. Google 지도를 표시하기 위해 google_maps_flutter 패키지를 사용할 수 있습니다.

먼저, google_maps_flutter 패키지를 프로젝트에 추가해야 합니다. 이를 위해 pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  google_maps_flutter: ^2.1.0

패키지를 추가한 후에는 pubspec.yaml 파일이 있는 위치로 이동하여 다음 명령을 실행하여 패키지를 설치합니다.

flutter pub get

그런 다음, 지도에 위치를 표시하는 방법은 아래와 같습니다.

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapWidget extends StatefulWidget {
  final double latitude;
  final double longitude;

  const MapWidget({Key key, this.latitude, this.longitude}) : super(key: key);

  @override
  _MapWidgetState createState() => _MapWidgetState();
}

class _MapWidgetState extends State<MapWidget> {
  GoogleMapController mapController;

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      initialCameraPosition: CameraPosition(
        target: LatLng(widget.latitude, widget.longitude),
        zoom: 15.0,
      ),
      onMapCreated: (GoogleMapController controller) {
        mapController = controller;
      },
      markers: <Marker>[
        Marker(
          markerId: MarkerId('currentLocation'),
          position: LatLng(widget.latitude, widget.longitude),
          infoWindow: InfoWindow(title: '현재 위치'),
        ),
      ].toSet(),
    );
  }
}

이제 MyLocationWidget 클래스에서 가져온 GPS 위치 정보를 활용하여 MapWidget을 호출하여 지도에 현재 위치를 표시할 수 있습니다.

이렇게 하여 velocity_x 패키지를 이용하여 GPS 및 지도 서비스를 손쉽게 플러터 앱에 통합할 수 있습니다.

이상입니다! :)