Comprobar conexión a internet en tu aplicación de Flutter

Holaaaa... Programador, hoy me levanté con la misión de avanzar en un proyecto en el que estoy trabajando, entonces abrí Visual Studio Code e inicialice mi simulador de IOS para comenzar a trabajar, y por alguna razón la aplicación no respondía, es decir solo me mostraba los appbar pero donde debería salir los datos (en este caso las fotos) no salia nada estaba en blanco, por un momento me asuste, me coloque a revisar el código y cuando tenía como unos 5 min viendo porque estaba pasando esto me di cuenta de lo que pasaba... tenía el internet CORTADO, que rabía habia perdido 5 min buscando algún error y todo era por culpa del internet, así que me dije tengo que hacer algo que me avise que mi aplicacion no tiene acceso a internet y de esta forma avisarle al usuario si hay algun problema.

Bueno investigando un poco encontré una solución así que aquí te la comparto:

1.- Instalamos la dependencia en nuestro archivo pubspec.yaml, este es el sitio oficial: https://pub.dev/packages/connectivity#-installing-tab-

dependencies: 
      connectivity: ^0.4.8+1

2.- Creamos un archivo nuevo, en mi caso lo cree dentro de mi carpeta de providers, y en mi caso le coloque conex_provider.dart y copiamos el siguiente código:

import 'dart:io'; //InternetAddress utility
import 'dart:async'; //For StreamController/Stream
import 'package:connectivity/connectivity.dart';

class ConnectionStatusSingleton {
  //This creates the single instance by calling the `_internal` constructor specified below
  staticfinalConnectionStatusSingleton _singleton =newConnectionStatusSingleton._internal();
  ConnectionStatusSingleton._internal();
  //This is what's used to retrieve the instance through the app
  staticConnectionStatusSingletongetInstance() => _singleton;
  //This tracks the current connection status
  bool hasConnection =false;
  //This is how we'll allow subscribing to connection changes
  StreamController connectionChangeController =newStreamController.broadcast();
  //flutter_connectivity
  finalConnectivity _connectivity =Connectivity();
  //Hook into flutter_connectivity's Stream to listen for changes
  //And check the connection status out of the gate
  voidinitialize() {
    _connectivity.onConnectivityChanged.listen(_connectionChange);
    checkConnection();
  }

StreamgetconnectionChange => connectionChangeController.stream;

 //A clean up method to close our StreamController
 // Because this is meant to exist through the entire application life cycle this isn't
 // really an issue
 voiddispose() {
 connectionChangeController.close();
 }
 //flutter_connectivity's listener
 void_connectionChange(ConnectivityResult result) {
 checkConnection();
 }
 //The test to actually see if there is a connection
 FuturecheckConnection() async {
 bool previousConnection = hasConnection;
 try {
 final result =awaitInternetAddress.lookup('google.com');
 if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
 hasConnection = true;
 } else {
 hasConnection = false; 
 }
 } on SocketException catch(_) {
 hasConnection = false;
 }
 //The connection status changed send out an update to all listeners
 if (previousConnection != hasConnection) {
 connectionChangeController.add(hasConnection);
 }
 return hasConnection;
 }
}

3.- Editamos nuestro archivo main.dart y agregamos las siguientes líneas:

ConnectionStatusSingleton connectionStatus = ConnectionStatusSingleton.getInstance();
 connectionStatus.initialize();

Si te llega a dar un error de inicialización debes agregar antes que eso esta linea:

WidgetsFlutterBinding.ensureInitialized();

Recuerda importar el paquete de conex_provider.dart igual Visual Studio Code te va a avisar que falta si no lo has hecho. Te debería quedar algo como esto:

void main() async {

WidgetsFlutterBinding.ensureInitialized();
    ConnectionStatusSingleton connectionStatus = ConnectionStatusSingleton.getInstance();
        connectionStatus.initialize();

    runApp(MyApp());

}

4.- Ya casí terminamos.. ahora vamos a editar la pagina donde quieres comprobar la conexión y agregamos las siguientes líneas:

- Importamos el async si no lo tenemos y el conex_provider.dart

import 'dart:async';
import 'package:NOMBREDETUAPP/src/providers/conex_provider.dart';

- Dentro de la clase de primero colocamos:

StreamSubscription _connectionChangeStream;

bool isOffline = false;

@override
   initState() {
     super.initState();

   ConnectionStatusSingleton connectionStatus = ConnectionStatusSingleton.getInstance();
   _connectionChangeStream = connectionStatus.connectionChange.listen(connectionChanged);
   }

void connectionChanged(dynamic hasConnection) {
     setState(() {
     isOffline = !hasConnection;
   });
 }

- En mi caso cree un Widget con el mensaje de que no hay conexión:

_sinConexion(){
 
   return Center(
      child: Container(
         child: Text('No hay Conexión a Internet...')
       )
     );

}

- Y llamamos ese widget en el container principal, en mi caso lo hice así, en el child hice una condición que valide si isOffline es igual a verdadero me muestra el Widget que cree con el nombre de _sinConexion() de lo contrario me muestra el Widget donde tengo los datos:

return Scaffold(
    appBar: AppBarSpotPrincipal(),
    body: Container(
        child: isOffline == true ? new Container(
            child: _sinConexion(),
        ) : _fotosPrincipal()
    ),
    bottomNavigationBar: NavBar()
 );

5.- y eso sería todo, el resultado en mi caso fue así: