[flutter] 플러터와 오프라인 모드

플러터(Flutter)는 구글에서 개발한 UI 프레임워크로, 한 번의 코드 작성으로 안드로이드 및 iOS 앱을 개발할 수 있습니다. 앱을 개발하는 동안 인터넷 연결이 불안정하거나 오프라인 상태일 때에도 앱이 정상적으로 작동해야 하는 경우가 있습니다. 이번 글에서는 플러터와 오프라인 모드의 관련 내용을 알아보겠습니다.

오프라인 상태 감지

앱이 오프라인 상태인지 여부를 감지하기 위해 connectivity 패키지를 사용할 수 있습니다. 이 패키지는 디바이스의 인터넷 연결 상태를 확인할 수 있는 기능을 제공합니다.

먼저, pubspec.yaml 파일에 connectivity 패키지를 추가해 주세요:

dependencies:
  connectivity: ^3.0.6

다음은 오프라인 상태 감지를 위한 기본적인 코드입니다:

import 'package:connectivity/connectivity.dart';

Future<bool> checkInternetConnection() async {
  var connectivityResult = await (Connectivity().checkConnectivity());
  if (connectivityResult == ConnectivityResult.none) {
    return false;
  } else {
    return true;
  }
}

위 코드에서는 checkInternetConnection() 함수를 사용하여 디바이스의 인터넷 연결 상태를 확인합니다. 반환값은 true 또는 false로, 디바이스가 온라인 상태인지 여부를 나타냅니다.

오프라인 상태 대응

플러터에서는 오프라인 상태일 때에도 사용자에게 알리는 등의 대응 방법을 제공할 수 있습니다. 예를 들어, 인터넷 연결이 끊겼을 때 텍스트나 아이콘을 통해 사용자에게 알림을 보여줄 수 있습니다.

다음은 오프라인 상태일 때 표시되는 위젯의 예시입니다:

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

class OfflineIndicator extends StatefulWidget {
  @override
  _OfflineIndicatorState createState() => _OfflineIndicatorState();
}

class _OfflineIndicatorState extends State<OfflineIndicator> {
  bool isOnline = true;

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

  Future<void> initConnectivity() async {
    var connectivityResult = await (Connectivity().checkConnectivity());
    setState(() {
      isOnline = (connectivityResult != ConnectivityResult.none);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: !isOnline ? Text('오프라인 상태입니다.') : Text('온라인 상태입니다.'),
    );
  }
}

위 코드에서는 _OfflineIndicatorState 클래스에서 isOnline 변수를 사용하여 온라인 상태인지 여부를 저장하고 변경합니다. 이전에 작성한 checkInternetConnection() 함수 대신 initConnectivity() 함수를 사용하여 디바이스의 인터넷 연결 상태를 초기화합니다. 상태에 따라 텍스트를 바꿔주는 간단한 예시를 보여주었습니다.

위에서 정의한 OfflineIndicator 위젯을 앱의 어디에서든지 사용할 수 있으며, 앱이 온라인 또는 오프라인 상태인지 표시합니다.

결론

이번 글에서는 플러터와 오프라인 모드의 관련 내용을 알아보았습니다. connectivity 패키지를 사용하여 인터넷 연결 상태를 확인하고, 상태에 따라 대응하는 방법을 알아보았습니다. 이를 통해 플러터 앱이 오프라인 상황에서도 정상적으로 동작할 수 있도록 할 수 있습니다.