[Flutter] 스플래시 스크린에서 네트워크 연결 상태 확인하기 | connectivity_plus 패키지

 

스플래시 스크린에서 로그인 여부를 확인해야 하는데 만약 네트워크가 아예 연결되어 있지 않다면 어떻게 처리해야 할까?

와이파이와 데이터를 모두 끄고 앱에 접속하면 어떻게 대처하는지 여러 가지 앱에 접속해 봤다. 

네트워크 연결에 문제가 있다는 사실을 알려주고, 재시도 버튼을 제공하기도 한다.

 

connectivity_plus | Flutter package

플러터에서는 connectivity_plus 패키지로 어떤 타입의 네트워크를 사용하고 있는지 혹은 네트워크 연결이 끊겼는지를 확인할 수 있다.

 

import 'package:connectivity_plus/connectivity_plus.dart';

Future<bool> checkNetworkConnectivity() async {
  // Check network connection status
  var connectivityResult = await Connectivity().checkConnectivity();
  // No network connection
  if (connectivityResult.contains(ConnectivityResult.none)) {
    showSnackbar(SnackbarMessages.networkDisconnected);
    return false;
  } else {
    return true;
  }
}

 

네트워크가 연결되었는지를 확인하는 함수를 만들었다.

네트워크 연결이 끊긴 경우 스낵바를 노출한다.

 

  // 로그인 여부에 따라 스크린 이동
  void _navigateBasedOnLoginStatus() {
      // 네트워크가 연결되지 않은 경우
      bool isNetworkConnected = await checkNetworkConnectivity();
      if (!isNetworkConnected) {
        _handleError();
        return;
      }

      // 하단 코드 생략
  }

  // 로딩 중 에러가 발생했을 경우 에러 스크린으로 이동
  void _handleError() {
    setError(true);
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(
        builder: (context) => ErrorScreen(
          refreshPage: () => navigateWithoutStack(Routes.splash),
        ),
      ),
    );
  }

`checkNetworkConectivity` 함수를 스플래시 스크린에 적용해보자.

`initState()`에서 실행되는 `_navigateBasedOnLoginStatus` 메서드에서 네트워크가 연결되지 않은 것을 확인할 경우 바로 에러 스크린으로 이동한다.

 

에러 스크린에서 네트워크 연결에 문제가 발생했다는 것을 알려주고 재시도 버튼을 배치해 네트워크를 정상적으로 연결한 후 다시 페이지를 로드할 수 있도록 했다.