플러터에서 Connectivity 패키지 사용 방법과 옵션: 초보자도 쉽게 따라 할 수 있는 가이드[네크워크 모니터링]

 

플러터(Flutter) 앱을 개발할 때, 네트워크 연결 상태를 모니터링하고 사용자에게 실시간으로 알리는 기능은 매우 중요합니다.

예를 들어, 인터넷 연결이 끊겼을 때 적절한 알림을 표시하거나, 데이터 사용량을 관리하는 등 다양한 상황에서 유용합니다.

이번 포스트에서는 초보자도 쉽게 이해할 수 있도록 Connectivity 패키지를 사용하여 네트워크 상태를 확인하고, 다양한 옵션을 설정하는 방법을 설명해드리겠습니다.

Connectivity 패키지란?

Connectivity 패키지는 플러터 앱에서 네트워크 연결 상태를 확인하고 모니터링할 수 있게 해주는 패키지입니다.

이 패키지를 사용하면 Wi-Fi, 모바일 데이터, 오프라인 상태 등을 쉽게 파악할 수 있으며, 연결 상태가 변경될 때 실시간으로 알림을 받을 수도 있습니다.

1. Connectivity 패키지 설치

먼저, pubspec.yaml 파일에 Connectivity 패키지를 추가합니다.

dependencies:
  connectivity_plus: ^2.0.0 # 최신 버전을 사용하세요.

이후, 터미널에서 flutter pub get 명령어를 실행해 패키지를 설치합니다.

2. 기본 사용 방법

패키지를 설치한 후, 네트워크 상태를 확인하고 모니터링하는 기본적인 방법을 알아보겠습니다.

a. 현재 네트워크 상태 확인하기

먼저, 현재 네트워크 상태를 확인하는 방법입니다.

import 'package:connectivity_plus/connectivity_plus.dart';

Future<void> checkConnectivity() async {
  var connectivityResult = await Connectivity().checkConnectivity();

  if (connectivityResult == ConnectivityResult.mobile) {
    print('모바일 데이터 연결됨');
  } else if (connectivityResult == ConnectivityResult.wifi) {
    print('Wi-Fi 연결됨');
  } else {
    print('인터넷 연결 안 됨');
  }
}

위 코드는 현재 네트워크 상태를 확인하여 모바일 데이터, Wi-Fi, 오프라인 여부를 출력하는 예제입니다.

b. 네트워크 상태 변경 모니터링

네트워크 상태가 변경될 때 이를 실시간으로 감지하는 방법입니다.

import 'package:connectivity_plus/connectivity_plus.dart';

void monitorConnectivity() {
  Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
    if (result == ConnectivityResult.mobile) {
      print('모바일 데이터로 변경됨');
    } else if (result == ConnectivityResult.wifi) {
      print('Wi-Fi로 변경됨');
    } else {
      print('오프라인 상태');
    }
  });
}

이 코드는 네트워크 상태가 변경될 때마다 이를 감지하여, 변경된 상태를 출력하는 예제입니다.

3. 주요 옵션 및 기능

Connectivity 패키지는 다양한 옵션과 기능을 제공합니다. 주요 기능들을 살펴보겠습니다.

a. 네트워크 상태 세부 정보 확인

연결된 네트워크에 대한 추가 정보를 얻고자 할 때는 다음과 같이 사용할 수 있습니다.

Future<void> getNetworkInfo() async {
  var wifiName = await Connectivity().getWifiName(); // Wi-Fi 이름
  var wifiBSSID = await Connectivity().getWifiBSSID(); // Wi-Fi BSSID
  var wifiIP = await Connectivity().getWifiIP(); // 기기의 IP 주소

  print('Wi-Fi 이름: $wifiName');
  print('BSSID: $wifiBSSID');
  print('IP 주소: $wifiIP');
}

이 예제는 사용 중인 Wi-Fi 네트워크의 이름, BSSID, IP 주소를 가져오는 방법입니다.

b. 인터넷 연결 여부 확인

네트워크에 연결되어 있어도 실제로 인터넷에 접속할 수 있는지 확인해야 하는 경우가 있습니다. 이를 위해 추가적인 패키지를 함께 사용하거나 HTTP 요청을 시도하여 확인할 수 있습니다.

import 'package:http/http.dart' as http;

Future<bool> checkInternetAccess() async {
  try {
    final response = await http.get(Uri.parse('https://www.google.com'));
    if (response.statusCode == 200) {
      print('인터넷 연결됨');
      return true;
    } else {
      print('인터넷 연결 안 됨');
      return false;
    }
  } catch (e) {
    print('인터넷 연결 안 됨: $e');
    return false;
  }
}

이 코드는 Google 홈페이지에 접속을 시도하여 인터넷에 실제로 연결되어 있는지를 확인하는 예제입니다.

4. 예제: 네트워크 상태에 따른 UI 변화

실제 앱에서 네트워크 상태에 따라 UI를 변화시키는 예제를 살펴보겠습니다.

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

class ConnectivityExample extends StatefulWidget {
  @override
  _ConnectivityExampleState createState() => _ConnectivityExampleState();
}

class _ConnectivityExampleState extends State<ConnectivityExample> {
  String _connectionStatus = '알 수 없음';
  final Connectivity _connectivity = Connectivity();

  @override
  void initState() {
    super.initState();
    _connectivity.onConnectivityChanged.listen((ConnectivityResult result) {
      setState(() {
        if (result == ConnectivityResult.mobile) {
          _connectionStatus = '모바일 데이터 연결됨';
        } else if (result == ConnectivityResult.wifi) {
          _connectionStatus = 'Wi-Fi 연결됨';
        } else {
          _connectionStatus = '인터넷 연결 안 됨';
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('네트워크 상태 확인'),
      ),
      body: Center(
        child: Text('현재 상태: $_connectionStatus'),
      ),
    );
  }
}

이 예제는 네트워크 상태가 변경될 때마다 화면에 표시되는 메시지를 업데이트하는 간단한 UI를 구현한 것입니다.

 

Connectivity 패키지는 플러터 앱에서 네트워크 상태를 모니터링하고 관리하는 데 필수적인 도구입니다.

이번 가이드에서는 패키지 설치부터 기본 사용 방법, 주요 옵션 설정, 그리고 네트워크 상태에 따른 UI 변화까지 다양한 내용을 다루었습니다.

초보자도 충분히 따라 할 수 있도록 최대한 쉽게 설명드렸으니, 이제 여러분의 프로젝트에 Connectivity 패키지를 적용해보세요!

구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱