[flutter] RefreshIndicator를 사용하여 사용자 위치 업데이트 시 자동으로 새로 고침하기

12 Dec 2023

flutter

앱에서 사용자의 위치를 업데이트하고 해당 위치 정보를 실시간으로 반영하기 위해서는 RefreshIndicator를 사용하는 것이 좋습니다. Flutter에서 제공하는 RefreshIndicator 위젯은 사용자가 아래로 스와이프하여 새로고침을 트리거할 수 있도록 해줍니다.

RefreshIndicator란?

Flutter에서 RefreshIndicator는 아래로 드래그하여 새로고침할 때 사용되는 시각적 피드백을 구현하기 위한 위젯입니다. 사용자의 제스처에 반응하여 데이터를 업데이트하는 데 사용됩니다.

사용자 위치 업데이트와 RefreshIndicator 연동하기

사용자 위치를 업데이트하기 위해서는 먼저 위치 서비스를 구현해야 합니다. 그리고 위치 정보가 업데이트될 때마다 화면을 자동으로 새로 고칠 수 있도록 RefreshIndicator를 활용할 수 있습니다.

다음은 간단한 예시 코드입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LocationUpdateScreen(),
    );
  }
}

class LocationUpdateScreen extends StatefulWidget {
  @override
  _LocationUpdateScreenState createState() => _LocationUpdateScreenState();
}

class _LocationUpdateScreenState extends State<LocationUpdateScreen> {
  LocationData _currentLocation;

  Future<void> _updateLocation() async {
    LocationData updatedLocation = await getLocation(); // 위치 업데이트 로직

    setState(() {
      _currentLocation = updatedLocation;
    });
  }

  Future<LocationData> getLocation() async {
    Location location = Location();
    return await location.getLocation();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Location Update'),
      ),
      body: RefreshIndicator(
        onRefresh: _updateLocation,
        child: _buildLocationInfo(),
      ),
    );
  }

  Widget _buildLocationInfo() {
    return Center(
      child: _currentLocation != null
          ? Text(
              '현재 위치: ${_currentLocation.latitude}, ${_currentLocation.longitude}')
          : Text('위치 정보를 불러오는 중...'),
    );
  }
}

위 코드에서 _updateLocation 메서드는 사용자의 위치를 업데이트하고, RefreshIndicator 위젯은 이를 감지하여 화면을 새로고침합니다. 사용자가 화면을 아래로 스와이프하면 _updateLocation이 호출되어 사용자의 위치를 업데이트하고 화면이 자동으로 갱신됩니다.

이와 같이 RefreshIndicator를 사용하면 사용자 위치 업데이트와 화면의 자동 새로고침을 간편하게 구현할 수 있습니다.

결론

Flutter의 RefreshIndicator를 사용하여 사용자 위치 업데이트 시 자동으로 새로고침하는 방법을 알아보았습니다. 사용자 편의성을 고려하여 실시간으로 변화하는 정보를 화면에 반영할 때 RefreshIndicator는 매우 유용한 도구입니다. 위치 정보 이외에도 다양한 데이터나 상태를 업데이트할 때에도 활용할 수 있으니, 적극적으로 적용해보시기를 권장합니다.

RefreshIndicator란?

사용자 위치 업데이트와 RefreshIndicator 연동하기

결론

References