flutter connectivity 패키지 사용하여 네트워크 상태 알아보기
오늘은 flutter로 앱이 실행되고 있는 기기의 네트워크 상태를 알아보는 connectivity 패키지에 대하여 알아보려 합니다.
에뮬레이터 및 기기 준비하기
안드로이드나 ios 앱으로 테스트할 장치를 준비해야 합니다.
준비했으면, 미리 기기 또는 에뮬레이터를 ide에 연결해줍니다.
pubspec.yaml 작성하기
dependencies:
flutter:
sdk: flutter
connectivity:
flutter 앱에서 네트워크 상태를 판단하려면 connectivity 패키지를 pubspec.yaml에 작성해줍니다.
main.dart 앱 코드 작성하기
import 'package:flutter/material.dart';
import 'package:connectivity/connectivity.dart';
앱에 머티리얼 위젯을 추가할 수 있는 material 패키지와 네트워크 상태를 알 수 있는 connectivity 패키지를 가져옵니다.
void main() => runApp(MyApp());
앱을 MyApp으로 구동합니다.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter connectivity',
home: MyHomePage(),
);
}
}
머티리얼 디자인으로 감싸진 MyHomePage 객체를 화면에 그려줍니다.
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
StatefulWidget으로 버튼, 슬라이더, 체크 박스처럼 사용자와 상호작용하여 위젯이 변화하는 것을 묶어줍니다.
createState 메소드를 오버라이딩하여 _MyHomePageState 객체를 생성해줍니다.
class _MyHomePageState extends State<MyHomePage> {
String networkStatus = 'null';
networkStatus를 초기화 합니다.
@override
void initState() {
super.initState();
initConnect();
}
initState를 오버라이딩하여 앱이 구동될 때에 initConnect 비동기 함수를 수행하게 합니다.
initConnect() async {
ConnectivityResult connectResult;
connectResult = await Connectivity().checkConnectivity();
updateStatus(connectResult);
}
네트워크의 상태를 담을 ConnectivityResult 타입의 변수를 만들어서 checkConnectivity()로 기기의 무선 상태를 담아줍니다.
updateStatus(ConnectivityResult result) async {
if (result == ConnectivityResult.wifi) {
String wifiName, wifiIP;
wifiName = (await Connectivity().getWifiName()).toString();
wifiIP = (await Connectivity().getWifiIP()).toString();
네트워크의 상태가 담긴 result로 와이파이일 경우의 조건문으로 와이파이 이름과 ip를 조회합니다.
setState(() {
networkStatus = result.toString() + "/" + wifiName + "/" + wifiIP;
});
wifi의 상태일 때 setState에 의해 networkStatus이 바뀌면서 화면이 다시 그려집니다.
} else if (result == ConnectivityResult.mobile) {
setState(() {
networkStatus = result.toString();
});
모바일 데이터의 상태일 때 setState에 의해 networkStatus이 바뀌면서 화면이 다시 그려집니다.
} else if (result == ConnectivityResult.none) {
setState(() => networkStatus = result.toString());
}
}
네트워크가 끊겨 있을 때 setState에 의해 networkStatus이 바뀌면서 화면이 다시 그려집니다.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Text(networkStatus)),
);
}
}
Center에 의해 화면의 가운데로 networkStatus 문자열이 출력됩니다.