[flutter] 플러터와 리버포드를 사용한 앱의 오프라인 동작 처리 방법

21 Dec 2023

flutter

리버포드(Riverpod)는 플러터(Flutter)의 상태 관리 라이브러리 중 하나로, 의존성 주입 및 상태 관리를 단순하게 처리할 수 있도록 도와줍니다. 앱이 오프라인 상태에서도 원활하게 동작할 수 있도록 하는 것은 매우 중요합니다. 이번 포스트에서는 플러터와 리버포드를 사용하여 앱의 오프라인 동작을 처리하는 방법에 대해 알아보겠습니다.

1. 오프라인 상태 감지

1.1. Connectivity 패키지를 이용한 오프라인 상태 감지

오프라인 상태에서의 동작 처리를 위해 먼저 네트워크 연결 상태를 감지해야 합니다. Connectivity 패키지는 휴대폰의 네트워크 연결 상태를 확인할 수 있도록 도와줍니다.

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

class OfflineScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: Connectivity().checkConnectivity(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else {
          if (snapshot.hasData) {
            var connectivityResult = snapshot.data;
            if (connectivityResult == ConnectivityResult.none) {
              return Text('오프라인 상태입니다.');
            } else {
              return Text('온라인 상태입니다.');
            }
          }
          return Text('에러가 발생했습니다.');
        }
      },
    );
  }
}

1.2. 인터넷 연결 변경 이벤트 수신

인터넷 연결 상태가 변경될 때마다 애플리케이션에게 알려주는 것도 필요합니다. Connectivity 패키지의 onConnectivityChanged 스트림을 이용하여 연결 상태의 변경을 감지할 수 있습니다.

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

class ConnectivityService {
  Stream<ConnectivityResult> get onConnectivityChanged {
    return Connectivity().onConnectivityChanged;
  }
}

2. 오프라인 상태에서의 데이터 관리

오프라인 상태에서도 데이터를 관리할 수 있도록 도와주는 패키지로는 sembast가 있습니다. Sembast는 간단한 로컬 데이터베이스를 사용하여 오프라인 데이터를 저장하고 관리할 수 있도록 해줍니다.

import 'package:sembast/sembast.dart';

void main() async {
  var db = await databaseFactoryIo.openDatabase('my_database.db');
  var store = intMapStoreFactory.store('my_store');
  
  var record = store.record(1);
  await record.put(db, {'name': 'Alice', 'age': 27});
}

3. 리버포드를 통한 상태 관리

리버포드는 플러터 앱의 오프라인 상태에서 상태를 관리하는 데에도 유용하게 사용될 수 있습니다. Provider 패키지를 사용하여 상태를 제공하고, 변경 사항을 감지하여 화면을 업데이트할 수 있습니다.

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

final isOnlineProvider = StreamProvider<bool>((ref) {
  final connectivity = Connectivity();
  return connectivity.onConnectivityChanged.map((event) => event != ConnectivityResult.none);
});

class StatusWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final isOnline = watch(isOnlineProvider);
    return isOnline
        ? Text('온라인 상태입니다.')
        : Text('오프라인 상태입니다.');
  }
}

결론

플러터와 리버포드를 사용하여 앱의 오프라인 동작을 처리하는 방법에 대해 알아봤습니다. Connectivity, Sembast와 함께 사용하여 네트워크 연결 상태를 감지하고, 오프라인 상태에서 데이터를 관리할 수 있었습니다. 리버포드를 이용하여 상태 관리를 간편하게 처리할 수 있었으며, 이를 통해 앱이 오프라인 상태에서도 원활하게 동작할 수 있도록 만들 수 있었습니다.

참고문헌: