[flutter] 플러터에서 위치 정보를 이용한 주변 주유소 찾기 앱 만들기

12 Dec 2023

flutter

이번에는 플러터(Flutter)를 사용하여 현재 위치 정보를 이용하여 주변 주유소를 찾는 앱을 만들어보겠습니다.

목표

우리의 앱은 사용자의 현재 위치를 기반으로 주변 주유소를 검색하고, 이를 지도에 표시할 것입니다. 사용자는 주유소의 정보를 확인하고 가격을 비교할 수 있을 것입니다.

필요한 기술과 패키지

위치 정보 사용 - 사용자의 현재 위치를 가져오기 위해 geolocator 패키지를 사용할 것입니다.
지도 표시 - 주유소의 위치를 지도에 표시하기 위해 google_maps_flutter 패키지를 사용할 것입니다.
주유소 정보 검색 - 사용자의 위치 주변의 주유소 정보를 가져오기 위해 Google Places API를 사용할 것입니다.

코드 예시

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  GoogleMapController mapController;
  Position _currentPosition;

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

  void _getCurrentLocation() async {
    _currentPosition = await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high,
    );
    print(_currentPosition);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('주변 주유소 찾기'),
        ),
        body: GoogleMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: CameraPosition(
            target: LatLng(_currentPosition.latitude, _currentPosition.longitude),
            zoom: 15.0,
          ),
        ),
      ),
    );
  }

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

결론

이제 필요한 패키지를 설치하고, 현재 위치 정보를 가져오고, 이를 지도에 표시하는 기능을 구현했습니다. 이제 Google Places API를 사용하여 주변 주유소의 정보를 가져오고, 지도에 표시하는 기능을 추가하면 됩니다. 만들고자 하는 앱에 맞게 디자인하고 기능을 더 확장한다면, 완성한 주변 주유소 찾기 앱을 사용자들에게 제공할 수 있을 것입니다.

참고 자료

이상으로 플러터에서 위치 정보를 이용한 주변 주유소 찾기 앱 만들기에 대해 알아보았습니다. 부가적인 기능을 추가하여 사용자에게 더 유용한 앱을 완성시킬 수 있을 것입니다.