[flutter] 플러터(expandable)을 이용한 지도 및 위치 서비스 앱 개발 방법

04 Dec 2023

flutter

개요

이 문서는 플러터 프레임워크를 사용하여 지도 및 위치 서비스를 제공하는 앱을 개발하는 방법에 대해 설명합니다. 이를 위해 expandable 패키지를 사용하여 지도를 확장 가능하게 만들고, 장치의 위치를 가져와서 지도 위에 마커를 표시하는 방법을 다루겠습니다.

필수 요구사항

Flutter SDK 설치
Android Studio 또는 Visual Studio Code와 같은 플러터 개발 환경
Google Cloud Platform에서 생성한 API 키

단계별 방법

1. expandable 패키지 설치

pubspec.yaml 파일을 열고 dependancies 섹션에 다음과 같이 expandable 패키지를 추가합니다:

dependencies:
  expandable: ^4.1.1

터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.

2. Google Maps API 키 생성

Google Cloud Platform에서 API 키를 생성해야 합니다. API 키를 생성하려면 다음 단계를 따르세요:

Google Cloud Platform 콘솔에 접속합니다.
프로젝트를 선택하고, “사용자 인증 정보”로 이동합니다.
“사용자 인증 정보 만들기”를 클릭하고 “API 키”를 선택합니다.
API 키를 안전한 곳에 보관합니다.

3. 맵 위젯 작성

main.dart 파일을 열고 다음 코드를 작성합니다:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '지도 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('지도'),
      ),
      body: ExpandableNotifier(
        child: ListView(
          physics: const BouncingScrollPhysics(),
          children: <Widget>[
            Expandable(
              collapsed: MapWidget(),
              expanded: Column(
                children: [
                  MapWidget(),
                  SizedBox(height: 20),
                  LocationWidget(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class MapWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200, // 지도의 높이 설정
      child: Placeholder(), // 지도 위젯을 추가하세요
      // TODO: 구글 지도 위젯을 추가하세요
    );
  }
}

class LocationWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '내 위치',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 10),
          // TODO: 위치 정보 표시 위젯을 추가하세요
        ],
      ),
    );
  }
}

위의 코드에서 MapWidget 위젯은 지도를 표시하는 역할을 하고, LocationWidget 위젯은 현재 위치를 표시하는 역할을 합니다. 이들 위젯을 원하는 방식으로 수정할 수 있습니다.

4. API 키 설정

AndroidManifest.xml 파일을 열고 다음 코드를 추가합니다:

<manifest ...>
  <application ...>
    <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="YOUR_API_KEY_HERE" />
  </application>
</manifest>

YOUR_API_KEY_HERE 부분에는 앞서 생성한 Google Cloud Platform API 키를 입력해야 합니다.

5. 앱 실행

이제 앱을 실행하여 지도와 현재 위치가 표시되는지 확인해보세요!

결론

이 문서에서는 expandable 패키지를 사용하여 플러터에서 지도 및 위치 서비스를 제공하는 앱을 개발하는 방법을 알아보았습니다. 이를 통해 사용자에게 편리한 기능을 제공할 수 있고, 위치 관련 앱을 쉽게 구현할 수 있습니다.

개요