[flutter] 플러터 Wrap을 사용하여 GPS 위치 기능을 구현하는 방법

07 Dec 2023

flutter

플러터(Flutter)는 구글에서 개발한 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크로, 다양한 기능과 UI 디자인을 손쉽게 구현할 수 있습니다. 이번에는 Wrap 위젯을 이용하여 GPS 위치 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 위치 권한 설정

첫 단계로, GPS 위치 기능을 사용하기 위해서는 위치 권한 설정이 필요합니다. AndroidManifest.xml 파일에 다음 코드를 추가해 주세요.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.your_app_package_name">
    
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <!-- ... -->

</manifest>

iOS에서는 Info.plist 파일에 다음 코드를 추가해 주세요.

<key>NSLocationWhenInUseUsageDescription</key>
<string>Your app needs access to location services when using the app.</string>

<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Your app needs access to location services when using the app.</string>

위치 권한 설정이 끝났으면, 다음 단계로 넘어갑니다.

2. 위치 정보 가져오기

위치 정보를 가져오기 위해서는 Location 패키지를 사용합니다. flutter pub add location 명령어를 통해 패키지를 추가해 주세요.

flutter pub add location

플러터에서 제공하는 Location 패키지를 사용하여 GPS 위치를 가져오는 코드 예시는 다음과 같습니다.

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

class LocationScreen extends StatefulWidget {
  @override
  _LocationScreenState createState() => _LocationScreenState();
}

class _LocationScreenState extends State<LocationScreen> {
  Location _location = Location();
  LocationData _currentLocation;

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

  Future<void> _getLocation() async {
    try {
      _currentLocation = await _location.getLocation();
      print('Latitude: ${_currentLocation.latitude}');
      print('Longitude: ${_currentLocation.longitude}');
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Location Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Current Location:',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 10),
            Text(
              'Latitude: ${_currentLocation?.latitude ?? "-"}',
              style: TextStyle(fontSize: 16),
            ),
            SizedBox(height: 5),
            Text(
              'Longitude: ${_currentLocation?.longitude ?? "-"}',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 위치 정보를 가져오는 _getLocation 함수를 구현하고, _currentLocation 변수에 현재 위치 정보를 저장하는 기능을 제공합니다. 위젯을 생성하고 앱을 실행하면 현재 위치 정보가 화면에 표시됩니다.

3. Wrap 위젯을 사용하여 위치 정보 표시

위치 정보를 가져온 다음, Wrap 위젯을 사용하여 위치 정보를 텍스트로 표시해 보겠습니다. Wrap 위젯은 자식 위젯을 행 또는 열에 자동으로 묶어주는 역할을 수행합니다.

class _LocationScreenState extends State<LocationScreen> {
  // ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Location Demo'),
      ),
      body: Center(
        child: Wrap(
          spacing: 8.0,
          runSpacing: 4.0,
          children: [
            Text(
              'Current Location:',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 10),
            Text(
              'Latitude: ${_currentLocation?.latitude ?? "-"}',
              style: TextStyle(fontSize: 16),
            ),
            Text(
              'Longitude: ${_currentLocation?.longitude ?? "-"}',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 Wrap 위젯을 추가하여 위치 정보 텍스트를 자동으로 가로나 세로로 배치합니다. spacing 및 runSpacing 속성을 사용하여 텍스트 사이의 간격을 조정할 수 있습니다.

결론

이제 Wrap 위젯을 사용하여 GPS 위치 기능을 구현하는 방법에 대해 알아보았습니다. 이를 활용하여 플러터 앱에서 GPS 위젯을 보다 간편하게 구현할 수 있습니다. 플러터의 다양한 위젯과 기능을 활용하여 앱을 보다 효율적으로 개발해보세요!

1. 위치 권한 설정

2. 위치 정보 가져오기

3. Wrap 위젯을 사용하여 위치 정보 표시

결론

참고 자료