[flutter] 플러터 geolocator를 이용한 위치 기반 실시간 축제 정보 애플리케이션 개발

04 Dec 2023

flutter

1. 소개

이번 블로그에서는 플러터(Flutter) 프레임워크와 Geolocator 패키지를 활용하여 위치 기반 실시간 축제 정보 애플리케이션을 개발하는 방법에 대해 알아보겠습니다. Geolocator는 플러터에서 위치 정보를 쉽게 얻을 수 있도록 도와주는 패키지입니다. 이 애플리케이션은 사용자의 현재 위치를 기반으로 주변에 있는 축제 정보를 보여줄 것입니다.

2. 필요한 패키지 설치

먼저, 프로젝트에서 Geolocator 패키지를 사용하기 위해 패키지를 설치해야 합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 다음 코드를 추가합니다:

dependencies:
  geolocator: ^7.1.0

설치를 완료하기 위해 터미널에서 flutter pub get 명령어를 실행합니다.

3. 위치 권한 요청

사용자의 위치 정보를 얻기 위해서는 앱에서 위치 권한을 요청해야 합니다. AndroidManifest.xml 파일을 열고 다음 코드를 추가합니다:

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

iOS에서는 Info.plist 파일에 위치 권한을 추가해야 합니다. <dict>...</dict> 섹션에 다음 코드를 추가합니다:

<key>NSLocationWhenInUseUsageDescription</key>
<string>Your description goes here</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Your description goes here</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>Your description goes here</string>

4. 현재 위치 얻기

Geolocator 패키지를 이용하여 앱에서 현재 위치를 얻어보겠습니다. 다음 코드를 추가하여 main.dart 파일을 업데이트합니다:

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

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

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

class FestivalScreen extends StatefulWidget {
  @override
  _FestivalScreenState createState() => _FestivalScreenState();
}

class _FestivalScreenState extends State<FestivalScreen> {
  Position _currentPosition;

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

  _getCurrentLocation() async {
    Position position = await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high,
    );
    
    setState(() {
      _currentPosition = position;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Festival App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Latitude: ${_currentPosition?.latitude ?? '-'}',
              style: TextStyle(fontSize: 24),
            ),
            Text(
              'Longitude: ${_currentPosition?.longitude?? '-'}',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

5. 위치 정보 이용하기

현재 위치를 얻어온 후에는 이를 이용하여 축제 정보를 얻어올 수 있습니다. 예를 들어, Open API를 통해 주변의 축제 정보를 가져오는 기능을 구현할 수 있습니다. 자세한 내용은 각 API의 문서를 참고하세요.

6. 축제 정보 API 연동

주변의 축제 정보를 가져오기 위해서는 축제 정보 API와 통신해야 합니다. 이를 위해 http 패키지를 설치하고 사용할 수 있습니다. 필요한 API 엔드포인트와 통신하는 예제 코드는 다음과 같습니다:

import 'package:http/http.dart' as http;

// API 호출 함수
Future<List<Festival>> fetchFestivals(double latitude, double longitude) async {
  final response = await http.get(Uri.parse(
    'https://api.example.com/festivals?latitude=$latitude&longitude=$longitude',
  ));

  if (response.statusCode == 200) {
    // 응답이 성공한 경우 Festival 객체로 변환하여 반환합니다.
    return Festival.fromJson(response.body);
  } else {
    throw Exception('Failed to fetch festivals');
  }
}

7. 애플리케이션 UI 개발

마지막으로, 앱의 사용자 인터페이스(UI)를 개발해야 합니다. 사용자의 위치 정보, 주변 축제 정보 등을 보여주는 UI를 설계하고 구현해야 합니다. 이 부분은 디자인과 사용성에 따라 달라질 수 있습니다. 해당 앱의 디자인은 여러분의 창의성에 맡기도록 하겠습니다.

8. 결론

이제 플러터와 Geolocator 패키지를 활용하여 위치 기반 실시간 축제 정보 애플리케이션을 개발하는 방법에 대해 알아보았습니다. Geolocator를 사용하면 플러터 앱에서 위치 정보를 쉽게 얻을 수 있습니다. 축제 정보 API와 함께 사용하여 사용자의 위치를 기반으로 주변에 있는 축제 정보를 표시할 수 있습니다. 이를 바탕으로 원하는 앱을 개발해보세요!

본 예제 코드는 참고용이며, 실제 앱 개발에 있어서는 보다 다양한 요구사항을 고려해야합니다. 추가적인 필요한 기능과 디자인을 고려하여 애플리케이션을 개발할 수 있습니다.

목차