[flutter] get_it를 사용하여 플러터 앱에서 지도와 경로 안내를 어떻게 구현하는가?

30 Nov 2023

flutter

소개

이번 포스트에서는 Flutter 앱에서 지도와 경로 안내를 구현하는 방법에 대해 알아보겠습니다. 지도와 경로 안내를 구현하기 위해 우리는 google_maps_flutter 패키지를 사용할 것이며, 의존성 관리를 위해 get_it 패키지를 사용할 것입니다.

단계 1: 종속성 추가하기

먼저 pubspec.yaml 파일에 다음 종속성을 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^1.0.0
  get_it: ^6.0.0

변경 사항을 적용하기 위해 터미널에서 flutter pub get 명령을 실행해주세요.

단계 2: get_it 세팅하기

get_it은 의존성 주입을 관리하기 위한 패키지입니다. main.dart 파일을 열고 get_it을 초기화하는 코드를 추가해주세요:

import 'package:get_it/get_it.dart';

void setupLocator() {
  GetIt.I.registerSingleton(GoogleMapsService());
}

위 코드에서 GoogleMapsService는 지도 기능과 경로 안내 기능을 제공하는 클래스입니다. 실제로는 해당 클래스를 실제 기능으로 구현해야 합니다.

단계 3: 지도 및 경로 안내 페이지 생성하기

이제 지도와 경로 안내를 보여주는 페이지를 생성해보겠습니다. 새로운 map_page.dart 파일을 생성하고 다음 코드를 추가해주세요:

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:get_it/get_it.dart';
import 'package:your_project_name/google_maps_service.dart';

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  GoogleMapsService _googleMapsService = GetIt.I<GoogleMapsService>();
  GoogleMapController _mapController;

  @override
  void initState() {
    super.initState();
    _googleMapsService.getCurrentLocation().then((LatLng currentLocation) {
      _mapController.animateCamera(CameraUpdate.newCameraPosition(
        CameraPosition(
          target: currentLocation,
          zoom: 14.0,
        ),
      ));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map Page'),
      ),
      body: GoogleMap(
        onMapCreated: (GoogleMapController controller) {
          _mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(37.532600, 127.024612),
          zoom: 14.0,
        ),
      ),
    );
  }
}

위 코드에서 GoogleMapsService를 get_it을 통해 가져오고, GoogleMapsService를 사용하여 현재 위치를 가져와 지도를 해당 위치로 이동시키는 예제를 볼 수 있습니다.

결론

이제 플러터 앱에서 get_it를 사용하여 지도와 경로 안내를 구현하는 방법에 대해 알아보았습니다. google_maps_flutter 패키지의 다양한 기능을 활용하여 앱에 맞는 지도와 경로 안내 기능을 구현할 수 있습니다.

더 자세한 내용은 Google Maps Flutter 패키지의 공식 문서를 참조해주세요.