[flutter] 플러터 Drawer에서 위치 기반 서비스를 사용하여 지도 기능을 추가하는 방법은?

07 Dec 2023

flutter

플러터에서 위치 기반 서비스를 사용하여 지도 기능을 추가하는 방법을 배워보겠습니다. 이를 위해 google_maps_flutter 패키지와 위치 권한을 사용할 수 있어야 합니다.

1. 패키지 추가하기

먼저, google_maps_flutter 패키지를 pubspec.yaml 파일에 추가해야 합니다. 다음과 같이 dependencies 섹션에 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^1.0.6 # 현재의 최신 버전을 사용하십시오.

패키지를 추가한 후 패키지를 가져오기 위해 터미널에서 flutter packages get 명령을 실행하거나, IDE에서 패키지를 가져옵니다.

2. 위치 권한 설정하기

애플리케이션이 위치 정보를 사용하기 위해서는 사용자에게 위치 권한을 요청해야 합니다. 이를 위해 앱의 AndroidManifest.xml 파일에 다음 권한을 추가해야 합니다:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.app">
  
    ...

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  
    ...

</manifest>

3. 지도 위젯 추가하기

이제 지도를 보여주기 위해 플러터 위젯을 추가해야 합니다. 이를 위해 GoogleMap 위젯을 사용합니다. 다음은 간단한 예시입니다:

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

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

class _MapScreenState extends State<MapScreen> {
  GoogleMapController? mapController;

  final LatLng _center = const LatLng(37.7749, -122.4194); // 초기 중심 좌표

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('지도'),
      ),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
      ),
    );
  }
}

4. Drawer에 추가하기

마지막으로, 이전에 작성한 MapScreen 위젯을 Drawer에 추가해야 합니다. 예를 들어, Scaffold 위젯의 drawer 속성을 수정하여 Drawer 위젯을 추가할 수 있습니다:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('홈'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('메뉴'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('지도'),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MapScreen()),
                );
              },
            ),
          ],
        ),
      ),
      body: Container(),
    );
  }
}

이제 앱에서 Drawer를 열어보면 “지도” 항목을 클릭할 때 MapScreen 위젯이 보여지고, 사용자는 위치 기반 서비스를 사용하여 지도를 탐색할 수 있습니다.

위치 기반 서비스를 사용하여 플러터 Drawer에 지도 기능을 추가하는 방법에 대해 알아보았습니다. 이를 적용하여 앱에 지도 기능을 쉽게 통합할 수 있습니다.