[flutter] 플러터 Wrap을 사용하여 앱의 지도 및 위치 기능을 구현하는 방법

07 Dec 2023

flutter

플러터는 Google에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크입니다. 이번에는 플러터의 Wrap 위젯을 사용하여 앱의 지도 및 위치 기능을 구현하는 방법에 대해 알아보겠습니다.

Wrap 위젯이란?

Wrap 위젯은 자식 위젯을 여러 줄로 나열하는 데 사용됩니다. 자식 위젯의 크기에 따라 여러 줄로 나누어질 수 있습니다. 이러한 특성을 이용하여 앱의 지도와 위치 기능을 구현할 수 있습니다.

위치 정보 가져오기

먼저 위치 정보를 가져오기 위해 geolocator 패키지를 설치해야 합니다. 이 패키지는 GPS 또는 네트워크를 통해 디바이스의 현재 위치 정보를 가져오는 기능을 제공합니다.

// pubspec.yaml 파일에 아래의 의존성을 추가하세요.
dependencies:
  geolocator: ^7.1.0

위치 정보를 가져오려면 다음 스텝을 따르세요.

import 'package:geolocator/geolocator.dart';

void getCurrentLocation() async {
  Position position = await Geolocator.getCurrentPosition(
    desiredAccuracy: LocationAccuracy.high,
  );
  
  double latitude = position.latitude;
  double longitude = position.longitude;
  
  // 위치 정보를 사용하여 지도상의 마커를 표시하거나 다른 작업을 수행할 수 있습니다.
}

위 코드는 현재 디바이스의 위치 정보를 가져오는 예시입니다. 이제 이 위치 정보를 Wrap 위젯을 사용하여 지도 상에 표시해 보겠습니다.

지도 표시하기

지도를 표시하기 위해 google_maps_flutter 패키지를 설치해야 합니다. 이 패키지는 구글 지도를 표시하고 다양한 맵 기능을 제공합니다.

// pubspec.yaml 파일에 아래의 의존성을 추가하세요.
dependencies:
  google_maps_flutter: ^2.0.10

지도를 표시하려면 다음 스텝을 따르세요.

import 'package:google_maps_flutter/google_maps_flutter.dart';

GoogleMapController? mapController;

void onMapCreated(GoogleMapController controller) {
  mapController = controller;
}

Widget buildMap() {
  return GoogleMap(
    onMapCreated: onMapCreated,
    initialCameraPosition: CameraPosition(
      target: LatLng(latitude, longitude),  // 위치 정보를 가져온 위도와 경도로 설정
      zoom: 15,
    ),
    markers: Set<Marker>.of([
      Marker(
        markerId: MarkerId("myLocation"),
        position: LatLng(latitude, longitude),  // 위치 정보를 가져온 위도와 경도로 설정
        infoWindow: InfoWindow(
          title: "My Location",
        ),
      ),
    ]),
  );
}

buildMap 함수에서는 GoogleMap 위젯을 반환하여 지도를 표시합니다. onMapCreated 콜백 함수에서 컨트롤러를 초기화하고, 사용자의 위치에 마커를 표시합니다.

Wrap으로 위치 정보와 지도 표시하기

이제 Wrap을 사용하여 위치 정보와 지도를 앱의 UI에 표시해 보겠습니다.

import 'package:flutter/material.dart';

class LocationPage extends StatefulWidget {
  @override
  _LocationPageState createState() => _LocationPageState();
}

class _LocationPageState extends State<LocationPage> {
  double latitude = 0.0;
  double longitude = 0.0;

  @override
  void initState() {
    super.initState();
    getCurrentLocation();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Location"),
      ),
      body: Center(
        child: Wrap(
          spacing: 8.0,
          runSpacing: 8.0,
          children: [
            Text("Latitude: $latitude"),
            Text("Longitude: $longitude"),
            SizedBox(
              width: MediaQuery.of(context).size.width,
              height: 200.0,
              child: buildMap(),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 위치 정보와 지도를 Wrap 위젯을 사용하여 세로로 표시하는 예시입니다. Text 위젯을 사용하여 위도와 경도를 표시하고, SizedBox 위젯 내에 buildMap 함수를 호출하여 지도를 표시합니다.

이제 LocationPage 위젯을 앱에 추가하여 위치 정보와 지도를 확인할 수 있습니다.

마무리

위에서 설명한 방법을 따라 플러터의 Wrap 위젯을 사용하여 앱의 지도 및 위치 기능을 구현할 수 있습니다. 지도 표시에는 google_maps_flutter 패키지, 위치 정보 가져오기에는 geolocator 패키지를 사용했습니다. 이를 응용하여 다양한 위치 기반 앱을 개발해 보세요!

위에서 제공한 코드는 단순한 예시이며 실제 앱에서는 더 많은 기능과 예외 처리가 필요할 수 있습니다. 자세한 사항은 해당 패키지의 문서와 예시를 참고하세요.