[flutter] 플러터에서 오프라인 상태에서 동작 제한 구현하기

오프라인 상태에서 앱이 정상적으로 동작하지 않도록 제한하는 기능은 사용자 경험을 향상시키는 데 큰 역할을 합니다. 플러터에서는 다양한 방법으로 오프라인 상태에서 동작 제한을 구현할 수 있습니다. 이번 포스트에서는 플러터에서 오프라인 상태에서 동작 제한을 구현하는 방법을 알아보겠습니다.

1. 인터넷 연결 상태 확인하기

오프라인 상태에서 동작 제한을 구현하기 위해서는 먼저 인터넷 연결 상태를 확인해야 합니다. Flutter에서는 connectivity 패키지를 통해 현재의 인터넷 연결 상태를 알 수 있습니다. 다음과 같이 connectivity 패키지를 pubspec.yaml 파일에 추가해줍니다:

dependencies:
  connectivity: ^2.2.1

이후에는 패키지를 가져와서 인터넷 연결 상태를 확인할 수 있습니다. 아래의 예시 코드를 참고하세요:

import 'package:connectivity/connectivity.dart';

...
  var connectivityResult = await (Connectivity().checkConnectivity());
  if (connectivityResult == ConnectivityResult.none) {
    // 오프라인 상태에서의 동작 제한 구현
    ...
  }
...

Connectivity().checkConnectivity()를 호출하여 현재의 인터넷 연결 상태를 확인할 수 있습니다. 반환값으로는 ConnectivityResult 타입이 리턴되는데, 이를 통해 인터넷 연결 유무를 판단할 수 있습니다.

2. 동작 제한 구현하기

인터넷 연결 상태를 확인했다면 이제 오프라인 상태에서 앱의 동작을 제한하는 것을 구현할 차례입니다. 여기서는 간단한 예시로 버튼을 눌렀을 때 오프라인 상태인지를 체크하여 동작 제한을 구현해보겠습니다.

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

class MyWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Text('버튼'),
      onPressed: () async {
        var connectivityResult = await (Connectivity().checkConnectivity());
        if (connectivityResult == ConnectivityResult.none) {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                title: Text('네트워크 연결 오류'),
                content: Text('오프라인 상태에서는 버튼을 누를 수 없습니다.'),
                actions: <Widget>[
                  TextButton(
                    child: Text('확인'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              );
            },
          );
        } else {
          // 동작 실행 로직
          ...
        }
      },
    );
  }
}

위의 코드에서 버튼을 누를 때마다 connectivity 패키지를 사용하여 인터넷 연결 상태를 확인하고, 오프라인 상태인 경우 showDialog를 통해 동작 제한을 알려주는 다이얼로그를 표시합니다. 그리고 온라인 상태인 경우에는 동작 실행 로직을 수행하도록 구현하면 됩니다.

마무리

이번 포스트에서는 플러터에서 오프라인 상태에서 동작 제한을 구현하는 방법에 대해 알아보았습니다. 인터넷 연결 상태를 확인하고, 오프라인 상태에서의 동작 제한을 구현하는 예시 코드를 살펴보았는데요. 실제 앱 개발에서는 이렇게 구현된 동작 제한 기능을 활용하여 사용자에게 좀 더 나은 경험을 제공할 수 있습니다.