你如何在flutter.dart中连续检查互联网访问，而不是连接[重复]

Posted 2023-02-23

【中文标题】你如何在flutter.dart中连续检查互联网访问，而不是连接[重复]

【英文标题】：How do you check internet ACCESS continously in flutter.dart, not connection [duplicate]

【发布时间】：2020-10-17 18:29:23

【问题描述】：

您如何持续检查互联网访问？我能够显示wifi是否已连接或移动数据。但是，并非所有连接都可以访问互联网。

 import 'package:connectivity/connectivity.dart';

var connectivityResult = await (Connectivity().checkConnectivity());
if (connectivityResult == ConnectivityResult.mobile) 
  // I am connected to a mobile network.
 else if (connectivityResult == ConnectivityResult.wifi) 
  // I am connected to a wifi network.

这是我目前使用的代码。 我希望有人能持续检查互联网访问吗？

【问题讨论】：

我或许能帮上忙。检查这个答案***.com/questions/49648022/…

【参考方案1】：

这是构建网络感知应用程序的方法

高级概述

创建一个侦听连接更改事件的服务，用于 例如 wifi、移动和无（离线）。此服务将发出 NewtorkStatus（我们的自定义类）每次都变成一个流 连接变化。

为上述 NetworkStatus 流创建消费者 每次 NetworkStatus 更改时都会通知。

根据网络状态重建主屏幕以显示任一 在线或离线内容。

听起来很棘手，但实际上很容易实现，我们将使用 connectivity 和 provider 包来拯救我们。

首先将我们的项目配置为使用上述依赖项，编辑pubspec.yaml以包含依赖项-

dependencies:
  flutter:
    sdk: flutter
  connectivity: ^3.0.6
  provider: ^6.0.1

运行$ pub get你同步所有的依赖。

现在我们将创建自己的NewtorkStatusService，此服务将使用NetworkStatus 枚举和两个状态Online 和Offline 来通知连接状态。

network_status_service.dart

enum NetworkStatus  
  Online, 
  Offline 

现在我们的 NetworkStatusService 将使用 Connectivity 包来获取当前连接状态（wifi、移动、无）的状态，并基于此发出一个新的 NetworkStatus 以进行流式传输。我们最终的 NetworkStatusService 看起来像这样 -

network_status_service.dart

import 'dart:async';
import 'package:connectivity/connectivity.dart';

enum NetworkStatus  Online, Offline 

class NetworkStatusService 
  StreamController<NetworkStatus> networkStatusController =
      StreamController<NetworkStatus>();

  NetworkStatusService() 
    Connectivity().onConnectivityChanged.listen((status)
      networkStatusController.add(_getNetworkStatus(status));
    );
  

  NetworkStatus _getNetworkStatus(ConnectivityResult status) 
    return status == ConnectivityResult.mobile || status == ConnectivityResult.wifi ? NetworkStatus.Online : NetworkStatus.Offline;
  

现在我们将创建我们赢得的自定义小部件，它将根据 NetworkStatus 值返回 onlineChild 或 offlineChild。这里我们将使用provider 包来获取NetworkStatus。我会看起来像这样 -

network_aware_widget.dart

import 'package:flutter/material.dart';
import 'package:flutter_network_aware_app/services/network_status_service.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:provider/provider.dart';

class NetworkAwareWidget extends StatelessWidget 
  final Widget onlineChild;
  final Widget offlineChild;

  const NetworkAwareWidget(Key? key, required this.onlineChild, required this.offlineChild)
      : super(key: key);

  @override
  Widget build(BuildContext context) 
    NetworkStatus networkStatus = Provider.of<NetworkStatus>(context);
    if (networkStatus == NetworkStatus.Online) 
      return onlineChild;
     else 
      _showToastMessage("Offline");
      return offlineChild;
    
  

  void _showToastMessage(String message)
    Fluttertoast.showToast(
        msg: message,
        toastLength: Toast.LENGTH_LONG,
        gravity: ToastGravity.BOTTOM,
        timeInSecForiosWeb: 1
    );
  

这里我也使用FlutterToast 来显示 toast 消息（只是为应用添加一些交互性）

现在是有趣的部分，我们将把所有部分组合在一起，让我们的应用响应 NetworkStatus 值。我们将在StreamProvider 小部件中使用定制的小部件。 StreamProvider 将订阅 NewtorkStatusService networkStatusController 流，并在每次 NetworkStatus 更改为 Online 或 Offline 时触发子组件的构建。这是它的外观 -

home.dart

import 'package:flutter/material.dart';
import 'package:flutter_network_aware_app/services/network_status_service.dart';
import 'package:flutter_network_aware_app/ui/components/network_aware_widget.dart';
import 'package:provider/provider.dart';

class Home extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Network Aware App"),
      ),
      body: StreamProvider<NetworkStatus>(
        create: (context) =>
            NetworkStatusService().networkStatusController.stream,
        child: NetworkAwareWidget(
          onlineChild: Container(
            child: Center(
              child: Text(
                "I am online",
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
              ),
            ),
          ),
          offlineChild: Container(
            child: Center(
              child: Text(
                "No internet connection!",
                style: TextStyle(
                    color: Colors.grey[400],
                    fontWeight: FontWeight.w600,
                    fontSize: 20.0),
              ),
            ),
          ),
        ),
      ),
    );
  

如您所见，我们将NetworkAwareWidget 包装在StreamProvider 或NetworkStatus 中。 StreamProvider 还确保在创建时它会订阅 NetworkStatusService 控制器流。

最后，我们的应用程序起点main.dart 将如下所示 -

ma​​in.dart

import 'package:flutter/material.dart';
import 'package:flutter_network_aware_app/ui/screens/home_screen.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData.dark().copyWith(primaryColor: Colors.blue),
        home: Home());
  

应用程序将按如下方式工作 -

我希望这可以帮助您构建自己的网络感知应用和组件！

【参考方案2】：

您可以使用此替代方法，而无需使用任何软件包。每当您需要检查互联网连接时调用此函数

Future<bool> internetConnectivity() async 
try 
  final result = await InternetAddress.lookup('google.com');
  if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) 
    return true;
  
 on SocketException catch (_) 
  return false;

return false;

【讨论】：

我试过这个，使用移动数据（我没有互联网访问权限）；它仍然返回 true，因为它能够从 internetadress.lookup 收集结果。谢谢你

【参考方案3】：

connectivity 包仅用于发现网络连接。如果您想确定互联网访问，您可以使用data_connection_checker。

【参考方案4】：

您可以使用此 https://pub.dev/packages/connectivity_widget 。通过安装这个包，在你的构建函数中使用这个代码。

ConnectivityWidget(
        builder: (context, isOnline) => Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("$isOnline ? 'Online' : 'Offline'", style: TextStyle(fontSize: 30, color: isOnline ? Colors.green : Colors.red),),
              SizedBox(height: 20,),
              Text(
                'Number of times we connected to the internet:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.display1,
              ),
            ],
          ),
        )

【讨论】：

您的解决方案是否反复检查互联网连接？

我正在使用这个小部件，但显示我处于离线状态，即使我在线

是的。它反复检查互联网连接。可以分享你的代码吗？

我用过flutter_offline插件，它工作正常。这是我的项目仓库github.com/umakanth-pendyala/DO-List-APP-flutter.git 的链接。您不必浏览整个项目，只需查看 lib/screens/connectivity_screen.dart。随意克隆项目并实施您的解决方案，如果可行，请告诉我