[flutter] 플러터에서 useNetworkInfo 훅(hook)을 활용한 네트워크 상태 확인

14 Dec 2023

flutter

네트워크 상태를 확인하는 기능은 모바일 애플리케이션 개발에서 매우 중요합니다. Flutter에서는 useNetworkInfo라는 custom 훅을 활용하여 간편하게 네트워크 상태를 확인할 수 있습니다. 이 튜토리얼에서는 플러터 앱에서 useNetworkInfo 훅을 활용하여 네트워크 상태를 확인하는 방법에 대해 알아보겠습니다.

useNetworkInfo 훅(Hook) 만들기

먼저, 아래와 같이 useNetworkInfo 훅을 만들어보겠습니다.

import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:connectivity/connectivity.dart';

NetworkInfo useNetworkInfo() {
  var connection = useValueNotifier<ConnectivityResult>(ConnectivityResult.none);

  useEffect(() {
    var connectivity = Connectivity();
    var subscription = connectivity.onConnectivityChanged.listen((result) {
      connection.value = result;
    });
    return subscription.cancel;
  }, []);

  return NetworkInfo(connection);
}

class NetworkInfo {
  final ValueNotifier<ConnectivityResult> connection;

  NetworkInfo(this.connection);
}

위 코드에서 useNetworkInfo 훅은 현재 네트워크 상태를 감지하고, 변경 시 알림을 받을 수 있는 기능을 제공합니다.

useNetworkInfo 훅(Hook) 활용하기

이제 만들어진 useNetworkInfo 훅을 사용하여 네트워크 상태를 확인해보겠습니다.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var networkInfo = useNetworkInfo();

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(networkInfo.connection.value.toString()),
        ),
      ),
    );
  }
}

위 코드에서 useNetworkInfo 훅을 활용하여 현재 네트워크 상태를 Text 위젯을 통해 화면에 출력하고 있습니다.

결론

이제, useNetworkInfo 훅을 활용하여 간단하게 Flutter 애플리케이션 내에서 네트워크 상태를 확인할 수 있는 방법에 대해 알아보았습니다. 이를 통해 앱이 온라인 또는 오프라인 상태일 때 사용자 경험을 개선하거나, 네트워크 요청을 보내기 전에 네트워크 상태를 확인할 수 있게 됩니다.

더 많은 정보는 Flutter Hooks 라이브러리를 확인해보시기 바랍니다.