[flutter] 플러터에서 네트워크 연결 상태 확인하기

플러터(Flutter) 앱을 개발할 때, 네트워크 연결 상태를 확인하는 기능은 중요합니다. 사용자가 오프라인일 때 알림을 표시하거나, 네트워크 연결이 복구되었을 때 다시 데이터를 가져오는 등의 기능을 구현할 수 있기 때문입니다. 이번 글에서는 Flutter에서 간단한 방법으로 네트워크 연결 상태를 확인하는 방법을 알아보겠습니다.

1. connectivity 패키지 추가하기

네트워크 연결 상태를 확인하기 위해 connectivity 패키지를 사용할 것입니다. 이 패키지는 Flutter 앱에서 현재의 네트워크 연결 상태를 확인하고, 연결 상태 변화에 따른 이벤트를 수신할 수 있는 기능을 제공합니다.

프로젝트의 pubspec.yaml 파일에 아래의 코드를 추가하여 connectivity 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  connectivity: ^3.0.3

그리고 나서 flutter packages get 명령을 실행하여 패키지를 다운로드하고 프로젝트에 적용합니다.

2. 네트워크 연결 상태 확인하기

이제 main.dart 파일을 열고, 아래의 코드를 추가하여 네트워크 연결 상태를 확인해보겠습니다:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Network Status Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Network Status Demo'),
        ),
        body: ConnectivityStatusWidget(),
      ),
    );
  }
}

class ConnectivityStatusWidget extends StatefulWidget {
  @override
  _ConnectivityStatusWidgetState createState() =>
      _ConnectivityStatusWidgetState();
}

class _ConnectivityStatusWidgetState extends State<ConnectivityStatusWidget> {
  String _connectionStatus = 'Unknown';

  @override
  void initState() {
    super.initState();
    _initConnectivity();
  }

  Future<void> _initConnectivity() async {
    var connectivityResult = await (Connectivity().checkConnectivity());
    setState(() {
      _connectionStatus = _getStatus(connectivityResult);
    });
  }

  String _getStatus(ConnectivityResult result) {
    switch (result) {
      case ConnectivityResult.wifi:
        return 'Wi-Fi';
      case ConnectivityResult.mobile:
        return 'Mobile Internet';
      case ConnectivityResult.none:
      default:
        return 'No Network';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Connection Status: $_connectionStatus',
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}

위의 코드에서 ConnectivityStatusWidget 위젯은 네트워크 연결 상태를 표시하는 역할을 합니다. initState 메서드에서는 네트워크 연결 상태를 확인하여 _connectionStatus 변수에 저장하고, 이를 화면에 표시합니다.

3. 실행 결과 확인하기

플러터 앱을 실행하고 네트워크 연결 상태를 확인해보세요. 화면에 “Connection Status: “ 뒤에 현재 네트워크 연결 상태가 표시될 것입니다. 예를 들어, Wi-Fi에 연결되어 있다면 “Connection Status: Wi-Fi”가 표시될 것입니다.

네트워크 연결 상태가 변경되면 자동으로 업데이트되지 않기 때문에, 이 코드를 추가적으로 개선하여 연결 상태가 변화할 때마다 화면을 갱신하도록 구현할 수 있습니다.

정리

위의 방법을 따라하면 Flutter 앱에서 손쉽게 네트워크 연결 상태를 확인할 수 있습니다. 네트워크 연결 상태에 따라 알림을 표시하거나, 데이터를 동적으로 로드하는 등의 기능을 구현할 때 유용하게 사용할 수 있습니다.

더 많은 기능을 원한다면 connectivity 패키지의 공식 문서를 참고해보세요.