[flutter] favorites 공략 - Connectivity 패키지 파헤쳐보기

[flutter] 플러터 공부좀 해봤다면 flutter favorites는 써봐야지

flutter favorites 패키지 한번씩 써보기 1탄으로 현재 핸드폰의 인터넷 연결 상태를 반환하는 Connectivity 패키지를 간단하게 적용해보겠습니다.

 

패키지 주소: pub.dev/packages/connectivity

connectivity | Flutter Package

 

832개의 좋아요, Pub points 95점, 인지도 99%의 패키지며, 플러터 팀에 의해 배포된 패키지입니다.

설명을 보면 플러터 앱의 네트워크 연결 상태를 확인 가능하며 모바일데이터(셀룰러)인지, 와이파이인지, 연결이 안되었는지 확인 가능하며 iOS Android 모두 작동 가능한 패키지입니다.

다만, 안드로이드의 경우 와이파이에 연결되었음은 확인 가능하지만 인터넷에 연결되어있다는 것을 보증하지는 않습니다

우리나라 공공wifi는 잘 되어있고 굳이 쓸데없이 인터넷 연결안된 와이파이를 켜놓는 사람이 있다면 오류 원인이 될 수 있겠죠?

 

사용법은 매우 간단합니다. 그냥 체크하는 메소드를 실행해서 연결 상태를 받아와서 처리하기만 하면 끝!

 

사용을 위해 간단한 클래스 하나를 만들었습니다.

var connectivityResult = await (Connectivity().checkConnectivity()); 를 통해 상태를 가져오는데 이 값은 ConnectivityResult 안의 wifi / none / mobile 값으로 반환해줍니다.

이 값을 그냥 써도 되지만 그냥 상수 값을 반환할때는 대문자로 해주는게 제기준에서는 가독성이 좋을 것 같아 결과값 반환을 위한 status 3개를 만들어 0,1,2에 매핑시켜주었습니다.

 

추가로 인터넷 연결상태에 대한 토스트는 디자인 통일을 위해 Connect 클래스 안에 메소드로 정의해두었습니다.

import 'package:connectivity/connectivity.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
 
class Connect {
  static const NOT_CONNECTED = 0;
  static const MOBILE = 1;
  static const WIFI = 2;
 
  Future<int> checkConnection() async {
    var connectivityResult = await (Connectivity().checkConnectivity());
    if (connectivityResult == ConnectivityResult.mobile) {
      return Connect.MOBILE;
    } else if (connectivityResult == ConnectivityResult.wifi) {
      return Connect.WIFI;
    } else if (connectivityResult == ConnectivityResult.none) {
      return Connect.NOT_CONNECTED;
    } else {
      //값을 못불러올 경우 연결되지 않은것으로 간주
      return Connect.NOT_CONNECTED;
    }
  }
 
  void setToast(message) {
    Fluttertoast.showToast(
        msg: message,
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.BOTTOM,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 14.0);
  }
}
 

클래스 정의 후, 저는 지도에서 웹뷰로 영상을 띄울 때 인터넷 연결 상태에 따라 경고 메시지를 띄워주기로 하였습니다.

import 'package:accidentv/helper/connectivity.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
 
class PopupCCTV {
  Future<void> showPopupCCTV(
      BuildContext context, String title, String url) async {
    var connectStatus = await Connect().checkConnection();
    var toastMessage = "";
    switch (connectStatus) {
      case Connect.MOBILE:
        toastMessage = "모바일 데이터를 사용중입니다. 사용량에 주의해주세요";
        break;
      case Connect.NOT_CONNECTED:
        toastMessage = "인터넷 연결상태가 원활하지 않습니다";
        break;
      case Connect.WIFI:
        toastMessage = "와이파이 데이터로 영상을 재생합니다";
        break;
    }
    Connect().setToast(toastMessage);
 
    // 위젯 리턴하는 부분은 제거했습니다
  }
}
 

결과 영상

이 패키지의 활용처로 생각해본 내용들인데 혹시 아이디어가 있으시면 댓글 부탁드립니다^^

 

1. 용량이 큰 데이터를 주고받을 경우 셀룰러 데이터를 사용중일 때 경고 출력

2. 인터넷 연결이 필요한 게임에서 어뷰징을 막기위해 인터넷 연결 확인

3. 주 수입원이 광고인 게임에서 광고 안보려고 인터넷 끄는 경우 방지