Colin's Blog
[flutter] pretty_dio_logger를 활용한 지도 및 GPS 경로 안내

본 포스트에서는 Flutter 앱에서 지도 및 GPS 기능을 사용하여 사용자에게 경로 안내를 제공하는 방법에 대해 알아보겠습니다. 또한, 네트워크 요청 로그를 보기 쉽게 출력하기 위해 pretty_dio_logger 패키지를 활용하는 방법에 대해서도 다룰 것입니다.

1. 지도 및 GPS 설정

먼저, Flutter 프로젝트에 google_maps_flutter 및 location 패키지를 추가해야 합니다. 이 패키지들을 사용하여 지도 및 GPS 기능을 쉽게 구현할 수 있습니다.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.8
  location: ^4.3.0

2. 지도 및 GPS 구현

google_maps_flutter와 location 패키지를 사용하여 지도를 표시하고 GPS 위치를 가져와 경로를 그리는 등의 기능을 구현할 수 있습니다.

예를 들어, 다음과 같이 Google 지도를 화면에 표시하고 사용자의 현재 위치를 가져와 마커로 표시할 수 있습니다.

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

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController mapController;
  LocationData _currentLocation;
  Location location = Location();

  @override
  void initState() {
    super.initState();
    location.onLocationChanged.listen((LocationData cLoc) {
      setState(() {
        _currentLocation = cLoc;
        mapController.animateCamera(
          CameraUpdate.newCameraPosition(
            CameraPosition(
              target: LatLng(_currentLocation.latitude, _currentLocation.longitude),
              zoom: 15.0,
            ),
          ),
        );
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map'),
      ),
      body: GoogleMap(
        onMapCreated: (GoogleMapController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(37.5665, 126.9780),
          zoom: 10.0,
        ),
        myLocationEnabled: true,
        myLocationButtonEnabled: true,
      ),
    );
  }
}

3. pretty_dio_logger를 활용한 네트워크 로그 출력

pretty_dio_logger 패키지는 네트워크 요청 및 응답에 대한 로그를 표시하기 쉽도록 도와주는 패키지입니다. 아래와 같이 패키지를 추가하고 활용할 수 있습니다.

dependencies:
  pretty_dio_logger: ^1.6.0

이후, Dio 클라이언트에서 pretty_dio_logger를 사용하여 네트워크 로그를 출력할 수 있습니다.

import 'package:dio/dio.dart';
import 'package:pretty_dio_logger/pretty_dio_logger.dart';

void main() {
  final dio = Dio();
  dio.interceptors.add(
    PrettyDioLogger(
      requestHeader: true,
      requestBody: true,
      responseBody: true,
      responseHeader: true,
      error: true,
      compact: false,
    ),
  );

  runApp(MyApp());
}

결론

본 포스트에서는 Flutter 앱에서 지도 및 GPS 기능을 활용하여 사용자에게 경로 안내를 제공하는 방법과 네트워크 요청 로그를 표시하는 방법에 대해 알아보았습니다. 이를 활용하여 사용자에게 편리한 앱을 제공할 수 있을 것입니다.

참고 문헌:

© 2018 Colin. All rights reserved.