Flutter网络类型与可达性检测插件network_type_reachability的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter网络类型与可达性检测插件network_type_reachability的使用

简介

network_type_reachability 是一个Flutter插件，允许应用程序检测网络变化。你可以获取详细的移动网络类型（如2G、3G、4G、5G），并且可以检测互联网连接的状态是否真实有效或不稳定。该插件适用于iOS和Android平台，并且可以通过创建监听器在单次调用中读取网络状态。

依赖项

该插件基于以下依赖项，但你不需要在 pubspec.yaml 中手动添加这些依赖项，因为它们已经包含在 network_type_reachability 插件中：

  • permission_handler: 9.2.0
  • dart_ping: ^6.1.2
  • dart_ping_ios: ^1.1.0

配置

为了确保 network_type_reachability 插件的正确运行，你需要进行一些配置。以下是针对Android和iOS平台的具体配置步骤。

Android配置

  1. 升级预1.12 Android项目
    自版本4.4.0起，此插件使用了Flutter 1.12的Android插件API。因此，你需要将你的项目迁移到支持新的Android基础设施。你可以参考升级指南进行迁移。

  2. AndroidX
    自版本3.1.0起，permission_handler 插件切换到了AndroidX版本的Android支持库。因此，你需要确保你的Android项目也升级到支持AndroidX。具体步骤如下：

    • 在 gradle.properties 文件中添加以下内容：
      android.useAndroidX=true
android.enableJetifier=true
    • 在 android/app/build.gradle 文件中设置 compileSdkVersion 为31：
      android {
  compileSdkVersion 31
  ...
}
    • 将所有 android. 依赖项替换为它们的AndroidX对应项。

  3. 权限配置
    在 AndroidManifest.xml 文件中添加必要的权限。通常只需在 main 版本中添加权限即可。

iOS配置

  1. 权限配置
    在 Info.plist 文件中添加必要的权限。以下是权限与 Info.plist 中键值的对应关系：

    • PermissionGroup.calendar -> NSCalendarsUsageDescription
    • PermissionGroup.reminders -> NSRemindersUsageDescription
    • PermissionGroup.contacts -> NSContactsUsageDescription
    • PermissionGroup.camera -> NSCameraUsageDescription
    • PermissionGroup.microphone -> NSMicrophoneUsageDescription
    • PermissionGroup.speech -> NSSpeechRecognitionUsageDescription
    • PermissionGroup.photos -> NSPhotoLibraryUsageDescription
    • PermissionGroup.location, PermissionGroup.locationAlways, PermissionGroup.locationWhenInUse -> NSLocationUsageDescription, NSLocationAlwaysAndWhenInUseUsageDescription, NSLocationWhenInUseUsageDescription
    • PermissionGroup.notification -> PermissionGroupNotification
    • PermissionGroup.mediaLibrary -> NSAppleMusicUsageDescription, kTCCServiceMediaLibrary
    • PermissionGroup.sensors -> NSMotionUsageDescription
    • PermissionGroup.bluetooth -> NSBluetoothAlwaysUsageDescription, NSBluetoothPeripheralUsageDescription
    • PermissionGroup.appTrackingTransparency -> NSUserTrackingUsageDescription
    • PermissionGroup.criticalAlerts -> PermissionGroupCriticalAlerts

  2. Podfile配置
    在 Podfile 文件中启用所需的权限。例如，如果你需要访问日历权限，取消注释以下代码：

    ## dart: PermissionGroup.calendar
'PERMISSION_EVENTS=1'

使用示例

1. 获取当前网络类型
String _networkTypeStatic = 'Unknown';

Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    const Text('NETWORK_TYPE : '),
    Text(
      _networkTypeStatic,
      style: const TextStyle(fontWeight: FontWeight.bold),
    ),
    TextButton(
      onPressed: () {
        _getCurrentNetworkStatus();
      },
      child: const Text('Get-Data'),
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(
            const Color.fromARGB(255, 162, 229, 188)),
      ),
    )
  ],
)

// Function to get current network status
_getCurrentNetworkStatus() async {
  if (Platform.isAndroid) {
    await NetworkTypeReachability().getPermisionsAndroid;
  }
  NetworkStatus status =
      await NetworkTypeReachability().currentNetworkStatus();
  setState(() {
    _networkTypeStatic = status.toString();
  });
}
2. 监听网络类型变化
String _networkTypeSuscription = 'Unknown';
StreamSubscription<NetworkStatus>? subscriptionNetworkType;

[@override](/user/override)
void initState() {
  super.initState();
  _listenNetworkStatus();
}

[@override](/user/override)
void dispose() {
  super.dispose();
  subscriptionNetworkType?.cancel();
}

_listenNetworkStatus() async {
  if (Platform.isAndroid) {
    await NetworkTypeReachability().getPermisionsAndroid;
  }
  subscriptionNetworkType =
      NetworkTypeReachability().onNetworkStateChanged.listen((event) {
    setState(() {
      _networkTypeSuscription = "$event";
    });
  });
}

// Widget to display subscription data
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Text('NETWORK_TYPE Suscription: '),
    Text(
      _networkTypeSuscription,
      style: const TextStyle(fontWeight: FontWeight.bold),
    ),
  ],
)
3. 获取互联网连接状态
String connectivityInternetStatic = 'Unknown';

Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    const Text('Status Internet Conection : '),
    Text(
      connectivityInternetStatic,
      style: const TextStyle(fontWeight: FontWeight.bold),
    ),
    TextButton(
      onPressed: () async {
        print('#========> cargando');
        connectivityInternetStatic = 'loading...';
        setState(() {});
        InternetStatusConnection data =
            await NetworkTypeReachability()
                .getInternetStatusConnection();
        print(data);
        print('#========> finalizando');

        connectivityInternetStatic = data.toString();
        setState(() {});
      },
      child: const Text('Get-Data'),
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(
            const Color.fromARGB(255, 162, 229, 188)),
      ),
    )
  ],
)
4. 监听互联网连接状态
String connectivityInternetSuscription = 'Unknown';
StreamSubscription<InternetStatusConnection>? subscriptionInternetConnection;

[@override](/user/override)
void initState() {
  super.initState();
  _listenInternetConnection();
}

[@override](/user/override)
void dispose() {
  super.dispose();
  subscriptionInternetConnection?.cancel();
  NetworkTypeReachability().listenInternetConnection = false;
}

_listenInternetConnection() async {
  subscriptionInternetConnection = NetworkTypeReachability()
      .getStreamInternetConnection(showLogs: false)
      .listen((event) {
    setState(() {
      connectivityInternetSuscription = event.toString();
    });
  });
}

// Widget to display subscription data
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Text('Status Internet Conection : '),
    Text(
      connectivityInternetSuscription,
      style: const TextStyle(fontWeight: FontWeight.bold),
    ),
  ],
)

完整示例Demo

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:network_type_reachability/network_type_reachability.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _networkTypeStatic = 'Unknown';
  String _networkTypeSuscription = 'Unknown';
  StreamSubscription<NetworkStatus>? subscriptionNetworkType;
  String connectivityInternetStatic = 'Unknown';
  String connectivityInternetSuscription = 'Unknown';
  StreamSubscription<InternetStatusConnection>? subscriptionInternetConnection;

  [@override](/user/override)
  void initState() {
    super.initState();
    _listenNetworkStatus();
    _listenInternetConnection();
  }

  _listenNetworkStatus() async {
    if (Platform.isAndroid) {
      await NetworkTypeReachability().getPermisionsAndroid;
    }
    subscriptionNetworkType =
        NetworkTypeReachability().onNetworkStateChanged.listen((event) {
      setState(() {
        _networkTypeSuscription = "$event";
      });
    });
  }

  _listenInternetConnection() async {
    subscriptionInternetConnection = NetworkTypeReachability()
        .getStreamInternetConnection(showLogs: false)
        .listen((event) {
      setState(() {
        connectivityInternetSuscription = event.toString();
      });
    });
  }

  _getCurrentNetworkStatus() async {
    if (Platform.isAndroid) {
      await NetworkTypeReachability().getPermisionsAndroid;
    }
    NetworkStatus status =
        await NetworkTypeReachability().currentNetworkStatus();
    setState(() {
      _networkTypeStatic = status.toString();
    });
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    subscriptionNetworkType?.cancel();
    subscriptionInternetConnection?.cancel();
    NetworkTypeReachability().listenInternetConnection = false;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Network Type Reachability'),
          backgroundColor: Colors.blueAccent[900],
        ),
        body: Column(
          children: [
            _expandedContainerRow(
              flex: 1,
              color: Colors.blueGrey[900],
              children: [
                Expanded(
                  child: _box(
                    child: const Center(
                      child: Text(
                        'Static Data',
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: _box(
                    child: const Center(
                      child: Text(
                        'Listen to changes',
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            _expandedContainerRow(
              children: [
                Expanded(
                  child: _box(
                    color: _colorStatusNetworkType(_networkTypeStatic),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        const Text('NETWORK_TYPE : '),
                        Text(
                          _networkTypeStatic,
                          style: const TextStyle(fontWeight: FontWeight.bold),
                        ),
                        TextButton(
                          onPressed: () {
                            _getCurrentNetworkStatus();
                          },
                          child: const Text('Get-Data'),
                          style: ButtonStyle(
                            backgroundColor: MaterialStateProperty.all(
                                const Color.fromARGB(255, 162, 229, 188)),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: _box(
                    color: _colorStatusNetworkType(_networkTypeSuscription),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Text('NETWORK_TYPE Suscription: '),
                        Text(
                          _networkTypeSuscription,
                          style: const TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            _expandedContainerRow(
              children: [
                Expanded(
                  child: _box(
                    color: _colorStatusInternetType(connectivityInternetStatic),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        const Text('Status Internet Conection : '),
                        Text(
                          connectivityInternetStatic,
                          style: const TextStyle(fontWeight: FontWeight.bold),
                        ),
                        TextButton(
                          onPressed: () async {
                            print('#========> cargando');
                            connectivityInternetStatic = 'loading...';
                            setState(() {});
                            InternetStatusConnection data =
                                await NetworkTypeReachability()
                                    .getInternetStatusConnection();
                            print(data);
                            print('#========> finalizando');

                            connectivityInternetStatic = data.toString();
                            setState(() {});
                          },
                          child: const Text('Get-Data'),
                          style: ButtonStyle(
                            backgroundColor: MaterialStateProperty.all(
                                const Color.fromARGB(255, 162, 229, 188)),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: _box(
                    color: _colorStatusInternetType(
                        connectivityInternetSuscription),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Text('Status Internet Conection : '),
                        Text(
                          connectivityInternetSuscription,
                          style: const TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Expanded _expandedContainerRow({
    required List<Widget> children,
    Color? color = Colors.transparent,
    int flex = 4,
  }) {
    return Expanded(
      flex: flex,
      child: Container(
        color: color,
        child: Row(
          children: children,
        ),
      ),
    );
  }

  Container _box({
    required Widget child,
    Color color = Colors.transparent,
  }) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black26),
        color: color,
      ),
      height: double.infinity,
      child: child,
    );
  }

  Color _colorStatusNetworkType(String data) {
    switch (data) {
      case 'Unknown':
        return Colors.yellow.shade100;
      case 'NetworkStatus.unreachable':
        return Colors.red.shade100;
      default:
        return Colors.green.shade100;
    }
  }

  Color _colorStatusInternetType(String data) {
    switch (data) {
      case 'Unknown':
        return Colors.yellow.shade100;
      case 'InternetStatusConnection.withoutInternet':
        return Colors.red.shade100;
      case 'InternetStatusConnection.withInternet':
        return Colors.green.shade100;
      case 'InternetStatusConnection.unstableInternet':
        return Colors.brown.shade100;
      default:
        return Colors.yellow.shade100;
    }
  }
}

更多关于Flutter网络类型与可达性检测插件network_type_reachability的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网络类型与可达性检测插件network_type_reachability的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用network_type_reachability插件来检测网络类型和可达性的代码示例。

首先，你需要在你的pubspec.yaml文件中添加network_type_reachability依赖：

dependencies:
  flutter:
    sdk: flutter
  network_type_reachability: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中按照以下步骤使用network_type_reachability插件：

  1. 导入插件

在你的Dart文件中导入插件：

import 'package:network_type_reachability/network_type_reachability.dart';
  1. 初始化插件

在你的主应用或需要检测网络状态的地方初始化插件：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Network Type & Reachability Demo'),
        ),
        body: NetworkStatusPage(),
      ),
    );
  }
}
  1. 检测网络类型和可达性

创建一个新的页面或组件来显示网络状态和类型：

import 'package:flutter/material.dart';
import 'package:network_type_reachability/network_type_reachability.dart';

class NetworkStatusPage extends StatefulWidget {
  @override
  _NetworkStatusPageState createState() => _NetworkStatusPageState();
}

class _NetworkStatusPageState extends State<NetworkStatusPage> {
  String? networkType;
  String? connectivityStatus;

  @override
  void initState() {
    super.initState();
    initNetworkStatus();
    NetworkTypeReachability.addConnectivityListener(onConnectivityChanged);
  }

  @override
  void dispose() {
    super.dispose();
    NetworkTypeReachability.removeConnectivityListener(onConnectivityChanged);
  }

  void initNetworkStatus() async {
    NetworkType? type = await NetworkTypeReachability.getNetworkType();
    bool isConnected = await NetworkTypeReachability.isConnected();

    setState(() {
      networkType = type?.toString() ?? 'Unknown';
      connectivityStatus = isConnected ? 'Connected' : 'Not Connected';
    });
  }

  void onConnectivityChanged(NetworkType? type, bool isConnected) {
    setState(() {
      networkType = type?.toString() ?? 'Unknown';
      connectivityStatus = isConnected ? 'Connected' : 'Not Connected';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Network Type: $networkType'),
          SizedBox(height: 20),
          Text('Connectivity Status: $connectivityStatus'),
        ],
      ),
    );
  }
}

在这个示例中，我们：

  • 初始化了NetworkTypeReachability插件。
  • 使用getNetworkType方法获取当前的网络类型。
  • 使用isConnected方法检查设备是否连接到网络。
  • 添加了一个连接状态监听器addConnectivityListener，当网络状态发生变化时，会调用onConnectivityChanged回调方法。
  • 在UI中显示了当前的网络类型和连接状态。

这样，你就可以在你的Flutter应用中检测和显示网络类型和可达性了。

回到顶部