Detectando a Conexão de Rede com Flutter

No post anterior, eu fiz uma lista dos pacotes e plugins que eu considero úteis para projetos de aplicativos em Flutter. Inserido nessa lista está o plugin Connectivity. Através dele é possível detectar qual conexão de rede (Wi-Fi ou 3G) esta sendo utilizada no Android e iOS. Além disso, ele também dá acesso à dados como o nome da rede e o IP.

Neste post, eu irei demonstrar como utilizar o plugin Connectivity para capturar os dados da rede que o dispositivo está conectado e seu respectivo status.

Vamos lá!

Primeiramente, iremos importar o plugin Connectivity no arquivo pubspec.xaml:

connectivity: ^0.4.8+1

view raw exemplo_flutter_connectivity_pubspec.yalm hosted with by GitHub

Em seguida, criamos uma classe em Dart na qual importaremos o pacote Connectivity. No método initState dessa classe, devemos inserir o seguinte trecho de código:

	import 'package:connectivity/connectivity.dart';
	String _connection = "";
	final Connectivity _connectivity = Connectivity();
	@override
	void initState() {
	super.initState();
	_connectivity.checkConnectivity().then((connectivityResult){_updateStatus(connectivityResult);});
	}
	void _updateStatus(ConnectivityResult connectivityResult) async{
	if (connectivityResult == ConnectivityResult.mobile) {
	updateText("3G/4G");
	} else if (connectivityResult == ConnectivityResult.wifi) {
	String wifiName = await _connectivity.getWifiName();
	String wifiSsid = await _connectivity.getWifiBSSID();
	String wifiIp = await _connectivity.getWifiIP();
	updateText("Wi-Fi\n$wifiName\n$wifiSsid\n$wifiIp");
	}else{
	updateText("Não Conectado!");
	}
	}
	void updateText(String texto){
	setState(() {
	_connection = texto;
	});
	}

view raw exemplo_flutter_connectivity_initstate.dart hosted with by GitHub

O trecho de código acima realiza a verificação sobre qual o tipo de conexão está sendo utilizada no momento: Wi-Fi ou 3G. É importante ressaltar que a checagem feita nesse trecho de código não garante que a rede em uso não apresentará erros de conexão (o dispositivo pode estar conectado em uma rede sem Internet, por exemplo) ou de timeout. Além disso, esse código é executado apenas na inicialização da tela, ou seja, com ele não é possível verificar a mudança de uma rede para a outra, por exemplo.

Para conseguir capturar a mudança de rede durante a utilização do app, é preciso fazer uso do seguinte trecho de código:

	import 'package:connectivity/connectivity.dart';
	String _connection = "";
	final Connectivity _connectivity = Connectivity();
	StreamSubscription<ConnectivityResult> _connectivitySubscription;
	@override
	void initState() {
	super.initState();
	_connectivitySubscription =
	Connectivity().onConnectivityChanged.listen(_updateStatus);
	}
	void _updateStatus(ConnectivityResult connectivityResult) async{
	if (connectivityResult == ConnectivityResult.mobile) {
	updateText("3G/4G");
	} else if (connectivityResult == ConnectivityResult.wifi) {
	String wifiName = await _connectivity.getWifiName();
	String wifiSsid = await _connectivity.getWifiBSSID();
	String wifiIp = await _connectivity.getWifiIP();
	updateText("Wi-Fi\n$wifiName\n$wifiSsid\n$wifiIp");
	}else{
	updateText("Não Conectado!");
	}
	}
	void updateText(String texto){
	setState(() {
	_connection = texto;
	});
	}
	@override
	void dispose() {
	_connectivitySubscription.cancel();
	super.dispose();
	}

view raw exemplo_flutter_connectivity_initstate_change.dart hosted with by GitHub

No código acima, utilizamos um stream para capturar as mudanças de rede. Quando a Wi-Fi for desligada e a 3G substituí-la, o texto na tela do app será atualizado. Lembrando que o stream dever ser cancelado no método dispose da classe.

O gif abaixo mostra como funciona o app implementado neste post:

Uma observação é que não consegui extrair o nome da rede Wi-Fi, por isso aparece null no gif. Pesquisei sobre, mas não encontrei o motivo. Se alguém conseguir achar o motivo, deixa a solução nos comentários. =)

Para visualizar o código fonte do projeto desenvolvido neste post acesse: https://github.com/luizmarcus/Flutter/tree/master/exemplo_connectivity

Bom, é isso.

Qualquer dúvida, deixa um comentário.