[flutter] 플러터 프로바이더를 사용하여 네트워크 연결 상태 확인하기

22 Dec 2023

flutter

이번 튜토리얼에서는 플러터(Flutter) 앱에서 프로바이더(Provider)를 사용하여 네트워크 연결 상태를 확인하는 방법에 대해 알아보겠습니다.

1. 프로바이더(Provider) 라이브러리 추가하기

먼저, pubspec.yaml 파일에 다음과 같은 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.2

의존성을 추가한 후에는 터미널에서 flutter pub get 명령을 실행하여 라이브러리를 다운로드합니다.

2. 네트워크 연결 상태 확인하는 Provider 생성하기

다음으로, 네트워크 연결 상태를 확인하는 Provider를 생성합니다.

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

class NetworkStatusProvider extends ChangeNotifier {
  bool _isConnected = false;

  bool get isConnected => _isConnected;

  void updateConnectionStatus(bool isConnected) {
    _isConnected = isConnected;
    notifyListeners();
  }
}

위의 코드에서 NetworkStatusProvider 클래스는 네트워크 연결 상태를 관리하고 ChangeNotifier를 상속하여 변경 사항을 알립니다.

3. 네트워크 연결 상태 확인 로직 구현하기

이제, 실제로 네트워크 연결 상태를 확인하는 로직을 구현합니다.

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

class NetworkStatusWidget extends StatefulWidget {
  @override
  _NetworkStatusWidgetState createState() => _NetworkStatusWidgetState();
}

class _NetworkStatusWidgetState extends State<NetworkStatusWidget> {
  final Connectivity _connectivity = Connectivity();
  late StreamSubscription<ConnectivityResult> _connectivitySubscription;

  @override
  void initState() {
    super.initState();
    _connectivitySubscription = _connectivity.onConnectivityChanged.listen((result) {
      Provider.of<NetworkStatusProvider>(context, listen: false)
          .updateConnectionStatus(result != ConnectivityResult.none);
    });
  }

  @override
  void dispose() {
    _connectivitySubscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<NetworkStatusProvider>(
      builder: (context, networkStatus, child) {
        if (networkStatus.isConnected) {
          return Text('네트워크 연결 상태: 연결됨');
        } else {
          return Text('네트워크 연결 상태: 끊김');
        }
      },
    );
  }
}

위의 코드에서 NetworkStatusWidget 클래스는 네트워크 연결 상태를 화면에 표시하며, Connectivity 패키지를 사용하여 실시간으로 네트워크 상태를 감지합니다.

4. 화면에 네트워크 연결 상태 위젯 추가하기

마지막으로, 위에서 구현한 NetworkStatusWidget 위젯을 화면에 추가합니다.

import 'package:flutter/material.dart';
import 'network_status_widget.dart';
import 'network_status_provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => NetworkStatusProvider(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('네트워크 상태'),
        ),
        body: Center(
          child: NetworkStatusWidget(),
        ),
      ),
    );
  }
}

위의 코드에서 ChangeNotifierProvider를 사용하여 NetworkStatusProvider를 앱 전역에서 사용할 수 있게 합니다.

이제 프로바이더(Provider)를 사용하여 플러터 앱에서 네트워크 연결 상태를 확인하는 방법에 대해 알아보았습니다. 위의 코드를 참고하여 네트워크 연결 상태 확인 기능을 구현해보시기 바랍니다.

1. 프로바이더(Provider) 라이브러리 추가하기

2. 네트워크 연결 상태 확인하는 Provider 생성하기

3. 네트워크 연결 상태 확인 로직 구현하기

4. 화면에 네트워크 연결 상태 위젯 추가하기

참고 자료