[flutter] 플러터 앱에서 GET 메소드를 사용하여 사용자 위치에 맞는 근처 가게 정보를 가져오는 방법은 무엇인가요?

30 Nov 2023

flutter

위치 정보 가져오기
- 앱에서 사용자의 위치 정보를 가져오기 위해서는 geolocator 패키지를 사용할 수 있습니다. 이 패키지는 GPS, Wi-Fi, 모바일 네트워크를 통해 사용자의 현재 위치를 가져올 수 있습니다. pubspec.yaml 파일에 geolocator 패키지를 추가하고, import 'package:geolocator/geolocator.dart'; 를 통해 해당 패키지를 임포트합니다.
- Geolocator().getCurrentPosition() 메소드를 호출하여 사용자의 현재 위치를 가져옵니다. 이 메소드는 비동기 함수이므로 async와 await 키워드를 사용하여 사용자의 위치 정보를 가져올 때까지 기다립니다.
사용자 위치를 기반으로 근처 가게 정보 가져오기
- 위치 정보를 가져온 후, 해당 위치에 맞는 근처 가게 정보를 가져오기 위해 API 요청을 보내야합니다. API 요청을 보낼 때 사용할 수 있는 패키지 중 하나는 http입니다. http 패키지를 pubspec.yaml 파일에 추가하고, import 'package:http/http.dart' as http; 로 패키지를 임포트합니다.
- API 요청을 보내려면 가게 정보를 제공하는 서비스의 엔드포인트 URL을 알아야 합니다. 엔드포인트 URL을 사용하여 GET 요청을 만들고 보내기 위해 http.get() 메소드를 사용합니다. 예를 들어, http.get('https://api.example.com/stores?latitude={latitude}&longitude={longitude}'); 와 같이 GET 요청을 작성하세요. {latitude} 와 {longitude} 는 사용자의 현재 위치로 대체되어야 합니다.
- 응답은 비동기로 반환되므로, await 키워드를 사용하여 응답을 기다립니다. 응답은 http.Response 오브젝트로 받게 되고, 이를 이용하여 가게 정보를 처리할 수 있습니다.
가게 정보를 화면에 표시하기
- 가게 정보를 가져온 후에는 화면에 표시해야 합니다. 플러터 앱에서 정보를 표시하기 위해 ListView나 GridView와 같은 위젯을 사용할 수 있습니다. 응답에서 가게 정보를 추출하고, 추출한 정보를 위젯에 매핑하여 화면에 표시합니다.

간단한 예제 코드를 확인해보세요:

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

class NearbyStoresPage extends StatefulWidget {
  @override
  _NearbyStoresPageState createState() => _NearbyStoresPageState();
}

class _NearbyStoresPageState extends State<NearbyStoresPage> {
  List<Store> stores = [];

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

  Future<void> fetchNearbyStores() async {
    // 위치 정보 가져오기
    Position position = await Geolocator().getCurrentPosition();

    // API 요청 보내기
    String url = 'https://api.example.com/stores?latitude=${position.latitude}&longitude=${position.longitude}';
    http.Response response = await http.get(url);

    if (response.statusCode == 200) {
      // 응답 처리
      List<dynamic> data = json.decode(response.body);
      setState(() {
        stores = data.map((storeData) => Store.fromJson(storeData)).toList();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nearby Stores'),
      ),
      body: ListView.builder(
        itemCount: stores.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(stores[index].name),
            subtitle: Text(stores[index].address),
          );
        },
      ),
    );
  }
}

class Store {
  final String name;
  final String address;

  Store({required this.name, required this.address});

  factory Store.fromJson(Map<String, dynamic> json) {
    return Store(
      name: json['name'],
      address: json['address'],
    );
  }
}

위의 코드는 geolocator 패키지와 http 패키지를 사용하여 사용자 위치에 맞는 근처 가게 정보를 가져오고, 화면에 표시하는 예제입니다.

geolocator 패키지 http 패키지