Colin's Blog
[flutter] 플러터 geolocator를 이용한 위치 기반 실시간 공연 정보 애플리케이션 개발 방법

플러터(Flutter)는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크로, 하나의 코드베이스로 안드로이드 및 iOS 앱을 동시에 개발할 수 있는 장점이 있습니다. 이번 블로그에서는 플러터의 geolocator 패키지를 이용하여 위치 기반 실시간 공연 정보 애플리케이션을 개발하는 방법을 알아보겠습니다.

1. geolocator 패키지 설치하기

pubspec.yaml 파일에서 geolocator 패키지를 dependencies에 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  geolocator: ^7.6.2

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

2. 위치 정보 가져오기

위치 정보를 가져오기 위해 geolocator 패키지의 Geolocator 클래스를 사용합니다. 위치 정보를 가져오기 위해서는 앱에 위치 접근 권한을 설정해야 합니다.

import 'package:geolocator/geolocator.dart';

class LocationService {
  Future<Position> getCurrentLocation() async {
    LocationPermission permission = await Geolocator.checkPermission();
    
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) {
        // 위치 접근 권한이 거부됨
        return null;
      }
    }

    if (permission == LocationPermission.deniedForever) {
      // 위치 접근 권한이 영구적으로 거부됨
      return null;
    }

    Position position = await Geolocator.getCurrentPosition();
    return position;
  }
}

위의 코드는 LocationService 클래스에서 getCurrentLocation 메소드를 통해 현재 위치 정보를 가져오는 방법을 보여줍니다. 먼저 checkPermission 메소드를 사용하여 위치 접근 권한을 확인하고, 권한이 없을 경우 requestPermission 메소드를 사용하여 권한을 요청합니다. 이후 getCurrentPosition 메소드를 사용하여 현재 위치를 가져옵니다.

3. 위치 기반 공연 정보 API 사용하기

위치 정보를 가져온 후, 해당 위치를 기반으로 실시간 공연 정보를 API에서 가져올 수 있습니다. 이 과정에서 HTTP 요청을 보내고, 응답을 받아와서 처리해야 합니다. 이를 위해 http 패키지를 사용할 수 있습니다.

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

class ConcertService {
  Future<List<Concert>> getConcertsByLocation(Position position) async {
    // 위치를 기반으로 실시간 공연 정보 API 호출
    final response = await http.get(Uri.parse('https://example.com/api/concerts?lat=${position.latitude}&lon=${position.longitude}'));

    if (response.statusCode == 200) {
      // API 응답을 파싱하여 공연 정보 리스트 반환
      List<Concert> concerts = [];
      var json = jsonDecode(response.body);
      for (var concertData in json['concerts']) {
        Concert concert = Concert.fromJson(concertData);
        concerts.add(concert);
      }
      return concerts;
    } else {
      // API 호출이 실패한 경우 예외 처리
      throw Exception('Failed to fetch concerts');
    }
  }
}

위의 코드는 ConcertService 클래스에서 getConcertsByLocation 메소드를 통해 위치 기반 공연 정보를 API에서 가져오는 방법을 보여줍니다. http.get 메소드를 사용하여 API에 GET 요청을 보내고, 응답을 받아옵니다. 이후 응답을 파싱하여 공연 정보를 리스트로 반환합니다.

4. 애플리케이션에 실시간 공연 정보 표시하기

위에서 가져온 실시간 공연 정보를 애플리케이션에서 표시하는 방법은 여러 가지가 있습니다. 예를 들어 ListView를 사용하여 공연 정보를 목록으로 표시할 수 있습니다.

class ConcertListWidget extends StatelessWidget {
  final List<Concert> concerts;

  ConcertListWidget({this.concerts});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: concerts.length,
      itemBuilder: (context, index) {
        Concert concert = concerts[index];
        return ListTile(
          title: Text(concert.title),
          subtitle: Text(concert.location),
        );
      },
    );
  }
}

위의 코드는 ListView.builder를 이용하여 ConcertListWidget을 구현한 예시입니다. concerts 리스트를 기반으로 각 공연 정보를 ListTile 형태로 표시하고 있습니다.

5. 플러터 애플리케이션 실행하기

위의 코드들을 모두 작성한 후, 플러터 애플리케이션을 실행하여 실시간 공연 정보를 확인할 수 있습니다.

void main() {
  runApp(ConcertApp());
}

class ConcertApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Concert App',
      home: ConcertListPage(),
    );
  }
}

class ConcertListPage extends StatefulWidget {
  @override
  _ConcertListPageState createState() => _ConcertListPageState();
}

class _ConcertListPageState extends State<ConcertListPage> {
  List<Concert> concerts = [];

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

  void initialize() async {
    LocationService locationService = LocationService();
    Position position = await locationService.getCurrentLocation();

    if (position != null) {
      ConcertService concertService = ConcertService();
      List<Concert> fetchedConcerts = await concertService.getConcertsByLocation(position);
      setState(() {
        concerts = fetchedConcerts;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Concert List'),
      ),
      body: ConcertListWidget(concerts: concerts),
    );
  }
}

위의 코드는 애플리케이션의 진입점인 main 함수와 ConcertApp 위젯, 그리고 공연 정보를 표시하는 ConcertListPage 위젯을 보여줍니다. ConcertListPage에서는 초기화 과정에서 위치 정보를 가져오고, 해당 위치를 기반으로 공연 정보를 가져옵니다. 이후 ConcertListWidget을 통해 공연 정보를 표시합니다.

마무리

위의 방법을 따라가면 플러터 geolocator를 이용하여 위치 기반 실시간 공연 정보를 표시하는 애플리케이션을 개발할 수 있습니다. 앱에서 위치 정보를 사용하는 경우에는 사용자의 개인정보 보호 및 사용자 경험에 유의하여 개발해야 합니다.

플러터 공식 문서 및 예제 코드 등을 참고하면 더 자세한 내용을 확인할 수 있습니다.

위의 예시 코드와 패키지를 기반으로 원하는 기능을 추가하여 공연 정보 애플리케이션을 개발해보세요. 플러터는 다양한 기능과 라이브러리를 제공하므로, 원하는 애플리케이션을 구현하는 것이 가능할 것입니다.

© 2018 Colin. All rights reserved.