Detectar conexión a Internet en Flutter
Veremos como podemos detectar conexión a Internet en una aplicación en Flutter mediante un paquete.
Te voy a mostrar cómo puedes verificar la conexión a internet en una aplicación en Flutter para eso estoy empleando el siguiente paquete:
import 'package:connectivity_plus/connectivity_plus.dart';
$ flutter pub add connectivity_plus
Aquí puedes ver la compatibilidad que tiene Entonces es un poco lo mismo abres el ya vienes aquí instalación mejor dicho copias el nombre colocas la versión si quieres si no no la colocas etcétera una vez instalado lo importas en donde quieras hacer la verificación yo en este caso estoy empleando el custom scaffold que recuerda que es un widget especial que yo creé antes ya te mostraba esto ahí te lo dejo anexo en caso de que lo quieras ver pero es un widget que yo utilizo para colocarlo en todas mis páginas en todas las páginas que yo tenga para mi aplicación que son todas las que puedes ver por acá es decir todas las que tengo aquí rotadas a nivel de la aplicación utilizan este custom scaffold ya que aparte de poder por ejemplo personalizar dónde quiero colocar el dware y demás también es útil para este tipo de situaciones en las cuales queremos hacer alguna comprobación previa antes de cada página antes de que el usuario pueda entrar a cada página como en este caso sería por ejemplo la conexión a internet aunque ya esa implementación un poco donde lo quieras colocar depende de ti en fin est lo final es un widget como cualquier otro un stateful widget y lo que importa es como lo utilizamos yo lo utilizo aquí en el inck State que Recuerda que es el según el ciclo de vida de una aplicación en Flutter sería el primero que se ejecuta o uno de los primeros o al menos antes que el de build que es el que se utiliza para construir nuestro widget:
@override
void initState() {
init();
super.initState();
}
Future<bool> checkIsInternetConnection() async {
var connectivityResult = await (Connectivity().checkConnectivity());
return ConnectivityResult.none != connectivityResult;
}
init() async {
_thereIsInternet = await checkIsInternetConnection();
if (!_thereIsInternet) {
// no hay internet
setState(() {});
}
}
Explicando el código anterior
Entonces esto no lo verifico aquí directamente por ya ahorita te voy a indicar por qué pero recuerda que aquí la problemática que se tiene es que este es complicado colocarlo de tipo asíncrono porque aunque lo acepte Aquí hay varios problemas que pueden suceder Entonces yo lo que hice fue Simplemente colocar esa parte de tipo asíncrono en otro método Así que aquí simplemente lo invoco fíjate que no estoy haciendo ningún bloqueo ya ahorita vemos cómo hacemos esto aquí tenemos el método y aquí tenemos el método que estamos invocando acá que utilizaría para hacer cualquier inicialización que en este caso solamente necesito es verificar la conexión a internet entonces cómo funciona aquí tengo un bullano que es esto esto es por defecto true es decir por defecto estoy indicando que tiene internet que creo que sería lo más sano y lo verifico mediante esta función este método que como puedes ver es de tipo weight Es decir de tipo asíncrono aquí lo tenemos todo esto es de tipo asíncrono.
Por aquí espero el resultado el resultado bueno puede volver varias cosas pero para efectos prácticos nosotros nos interesa es si no hay conexión por lo tanto si no hay conexión aquí devuelve el siguiente objeto que sería el de conexi resve punto nulo aquí puedes ver el resto en caso de que te interese que si es por ethernet que si es móvil que si es WiFi aquí puedes ver todo eso pero otra vez nos interesa es cuando no tenemos conexión no el tipo de conexión y lo verificamos acá la respuesta:
ConnectivityResult
Esto lo por alguna cuestión lo hice al revés o como un está acostumbrado perfectamente puede ser así pero bueno lo hice por alguna razón al revés yo lo voy a dejar así de igual aquí verificamos si es igual si es igual a esto significa que no tenemos internet por lo tanto devolvería un falso y por lo tanto no tenemos internet y en ese caso haces algo:
return connectivityResult != ConnectivityResult.none
Entonces aquí como puedes suponer y tal cual estás viendo en el código esto es una petición de tipo asíncrono todas las conexiones que son de disco o para internet son de tipo asíncrono por razones obvias y esa aquí donde hacemos el bloqueo fíjate que entre comillas el bloqueo ya que otra veces es un poco difícil colocar en ciertos métodos importantes para nosotros en la sin y la wit cuando estamos trabajando con un este full widget métodos aquí bloqueantes como son el in setState y el de build entonces yo el bloqueo entre comillas lo que hago es para no emplear un Future simplemente cuando no hay internet es que recargo toda la página y se recarga mediante setState y eso es lo que yo estoy haciendo entonces qué es lo que hacemos es ejecutar nuevamente el build y en el build lo que hago es verificar la conexión a internet si no hay conexión entonces pinto cualquier otro tipo de widget:
@override
Widget build(BuildContext context) {
if (!_thereIsInternet) {
// no hay conexion
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(LocaleKeys.thereIsNoInternet.tr()),
const SizedBox(height: 15),
MaterialButton(
color: Theme.of(context).primaryColor,
textTheme: Theme.of(context).buttonTheme.textTheme,
// textTheme: Theme.of(context).buttonTheme,
onPressed: () async {
await init();
if (_thereIsInternet) {
// navega a alguna pagina para regargar
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => ListPage(
false, 0, 0, '', LocaleKeys.lastsPosts.tr())));
// setState(() {});
// no llama al metodo de build
// Navigator.pushReplacement(
// context,
// MaterialPageRoute(
// builder: (BuildContext context) => super.widget));
}
},
child: Text(LocaleKeys.reload.tr(),
style: Theme.of(context)
.textTheme
.bodyLarge!
.copyWith(color: Colors.white)),
),
],
),
),
);
}
En este caso con un botón en el medio que navegue bueno con un botón en el medio que dice que no hay internet que es el mensaje que estoy colocando acá pero cuando ya hay conexión o cuando quiero mejor dicho cuando el usuario quiere verificar la conexión lo que yo hago es colocar aquí un botón entonces llamamos al método que
te mostraba antes yY si esto finalmente hace que There is internet sea true es decir que hay internet Le muestro o navego hacia una página en específico en este caso la de listado d de las publicaciones otra vez esto es un botón que siempre va a estar presente y lo que hace es cada vez que lo pulse el usuario verificar si hay conexión a internet que lo que hace a la final esta verificación es colocar esto en true Y si esto es true entonces puedo Navegar perfectamente hacia otra página y a efectos del usuario Estás viendo que estará cargando la aplicación en este caso lo mejor era cargar la página actual pero eso es un poco complicado o no he visto la forma de hacerlo No sé bueno no hay una forma como quien dice o hasta donde yo he investigado oficial de recargar una página entonces para evitarme esa molestia ya que no puedo hacer como quien dice desde la aplicación no puede hacer un hor reload o algo por el estilo lo que hago es una navegación hacia otra página haciendo un push replacement:
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => ListPage(
false, 0, 0, '', LocaleKeys.lastsPosts.tr())));
Por lo tanto reemplaza esta página y ya nos quitamos toda la loquera con la parte de la navegación la la verificación de internet y poco más que decir es así de simple Así que con estas líneas de código puedes verificar fácilmente cuándo hay conexión o no y a partir de ahí actuar medida es decir si no hay conexión pintas una interfaz diferente Ya que en este caso suponte que es la página de listado de las publicaciones no va a construir nada porque no hay conexión y a partir de que ya tengamos conexión simplemente vamos a una página en específico.
- Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter