[flutter] 플러터에서 오프라인 상태에서의 UI 처리 방법

온라인 상태에서 앱을 개발할 때는 API 호출이나 데이터 업데이트 등을 쉽게 처리할 수 있지만, 오프라인 상태에서는 다른 방법을 사용해야합니다. 이번 포스트에서는 플러터 앱에서 오프라인 상태에서의 UI 처리 방법을 살펴보겠습니다.

1. 오프라인 상태 감지

오프라인 상태에서의 UI 처리를 위해 먼저 오프라인 상태를 감지해야합니다. 플러터에서는 connectivity 패키지를 사용하여 네트워크 연결 상태를 확인할 수 있습니다. 다음은 connectivity 패키지를 사용하여 오프라인 상태를 감지하는 예시입니다.

import 'package:connectivity/connectivity.dart';

...

final ConnectivityResult connectivityResult =
    await Connectivity().checkConnectivity();
if (connectivityResult == ConnectivityResult.none) {
  // 오프라인 상태 처리를 수행하는 UI 업데이트 코드 작성
} else {
  // 온라인 상태 처리를 수행하는 UI 업데이트 코드 작성
}

connectivityResult 변수에 현재의 연결 상태가 저장되고, ConnectivityResult.none인 경우 오프라인 상태로 간주할 수 있습니다.

2. UI 업데이트 처리

오프라인 상태에서 앱의 UI를 제공하기 위해 다양한 방법을 사용할 수 있습니다. 몇 가지 일반적인 방법은 다음과 같습니다.

2.1. 상태 표시 위젯 사용

오프라인 상태일 때 사용자에게 상태를 알리기 위해 상태 표시 위젯을 사용할 수 있습니다. 예를 들어, 오프라인 상태임을 알리는 메시지를 표시하거나 로딩 스피너를 보여줄 수 있습니다.

Widget build(BuildContext context) {
  return Scaffold(
    body: OfflineBuilder(
      connectivityBuilder: (
        BuildContext context,
        ConnectivityResult connectivity,
        Widget child,
      ) {
        final bool connected = connectivity != ConnectivityResult.none;
        if (connected) {
          return child;
        } else {
          return Center(
            child: Text("오프라인 상태입니다."),
          );
        }
      },
      child: // 온라인 상태일 때 보여줄 UI 코드 작성
    ),
  );
}

2.2. 캐시 데이터 사용

오프라인 상태에서는 이전에 받아온 데이터를 활용할 수 있습니다. 이전에 받아온 데이터를 캐시에 저장하고, 오프라인 상태일 때 해당 캐시를 화면에 표시하는 방법을 사용할 수 있습니다.

Widget build(BuildContext context) {
  return FutureBuilder<List<Data>>(
    future: _getDataFromCache(), // 캐시에서 데이터 가져오기
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        final List<Data> cachedData = snapshot.data;
        // 캐시된 데이터를 활용하여 UI 업데이트
        return ListView.builder(
          itemCount: cachedData.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(cachedData[index].title),
            );
          },
        );
      } else if (snapshot.hasError) {
        return Text("데이터를 가져오는 중 오류가 발생했습니다.");
      }
      // 로딩 중인 UI 업데이트
      return Center(child: CircularProgressIndicator());
    },
  );
}

3. 오프라인 상태에서의 기능 제한

오프라인 상태에서는 일부 기능을 제한해야할 수도 있습니다. 예를 들어, 온라인 상태일 때만 데이터 업데이트를 허용하고, 오프라인 상태에서는 데이터 업데이트 버튼을 비활성화하는 방법을 사용할 수 있습니다. 이를 위해 ElevatedButton, RaisedButton 등의 위젯을 사용하여 버튼을 비활성화할 수 있습니다.

Widget build(BuildContext context) {
  return ElevatedButton(
    onPressed: (connectivityResult == ConnectivityResult.none)
        ? null // 오프라인 상태일 때 버튼 비활성화
        : _updateData, // 온라인 상태일 때 데이터 업데이트 메서드 호출
    child: Text("데이터 업데이트"),
  );
}

결론

이상으로 플러터에서 오프라인 상태에서의 UI 처리 방법에 대해 알아보았습니다. connectivity 패키지를 사용하여 오프라인 상태를 감지하고, 상태 표시 위젯이나 캐시 데이터를 활용하여 오프라인 상태에서도 사용자에게 적절한 UI를 제공할 수 있습니다.

더 자세한 사항은 Flutter Connectivity 패키지 문서를 참조하십시오.