¿Cómo verificar la conexión a Internet en Flutter?

En muchas aplicaciones, debe comprobar la conexión a Internet antes de pasar a la pantalla principal. Si la conexión a Internet no está disponible, podemos notificar al usuario que active la conexión a Internet. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

Implementación paso a paso

Cree una clase o un widget con estado  MyApp y devuelva MaterialApp(). En la propiedad de inicio de MaterialApp, llame a la clase HomePage().

Dart

import 'package:checkinginternet/home.dart';
import 'package:flutter/material.dart';
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  State<MyApp> createState() => _MyAppState();
}
  
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false,
    home: HomePage(),);
  }
}

Ahora cree otra página de inicio de clase, donde vamos a implementar nuestra lógica real.

Dart

import 'dart:io';
import 'package:flutter/material.dart';
  
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  
  @override
  State<HomePage> createState() => _HomePageState();
}
  
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GeeksforGeeks"),
      ),
      body: Column(
        children: [
          Text("Active Connection? $ActiveConnection"),
          const Divider(),
          Text(T),
          OutlinedButton(
              onPressed: () {
                CheckUserConnection();
              },
              child: const Text("Check"))
        ],
      ),
    );
  }
}

En la clase de página de inicio, tenemos una propiedad de cuerpo Scaffold que contiene el widget de columna . La columna tiene un widget Text y OutlinedButton, donde llamamos a una función CheckUserConnection . Ahora debe definir la función CheckUserConnection(), esta función se sincronizará porque lleva algún tiempo verificar la conexión a Internet.

Dart

bool ActiveConnection = false;
String T = "";
Future CheckUserConnection() async {
    try {
      final result = await InternetAddress.lookup('google.com');
      if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
        setState(() {
          ActiveConnection = true;
          T = "Turn off the data and repress again";
        });
      }
    } on SocketException catch (_) {
      setState(() {
        ActiveConnection = false;
        T = "Turn On the data and repress again";
      });
    }
  }

Solo estamos llamando a una función de búsqueda con la string de paso «google.com». Si el resultado no está vacío, llamamos a la función setstate() y cambiamos la variable Conexión activa a verdadero, otro falso, 

Nota : si desea verificar el inicio de la aplicación, debe llamar a la función initState() y llamar internamente a la función CheckUserConnection .

Dart

@override
void initState() {
   CheckUserConnection();
    super.initState();
 }

El código final parece,

Dart

import 'dart:io';
import 'package:flutter/material.dart';
  
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  
  @override
  State<HomePage> createState() => _HomePageState();
}
  
class _HomePageState extends State<HomePage> {
    bool ActiveConnection = false;
  String T = "";
  Future CheckUserConnection() async {
    try {
      final result = await InternetAddress.lookup('google.com');
      if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
        setState(() {
          ActiveConnection = true;
          T = "Turn off the data and repress again";
        });
      }
    } on SocketException catch (_) {
      setState(() {
        ActiveConnection = false;
        T = "Turn On the data and repress again";
      });
    }
  }
 @override
  void initState() {
   CheckUserConnection();
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GeeksforGeeks"),
      ),
      body: Column(
        children: [
          Text("Active Connection? $ActiveConnection"),
          const Divider(),
          Text(T),
          OutlinedButton(
              onPressed: () {
                CheckUserConnection();
              },
              child: const Text("Check"))
        ],
      ),
    );
  }
}

Producción:

Publicación traducida automáticamente

Artículo escrito por ms471841 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *