Flutter网络连接检测插件connectivity_plus的使用

插件概述

connectivity_plus 是一个Flutter插件，它允许Flutter应用程序发现可用的网络连接类型。该插件支持Android、iOS、MacOS、Web、Linux和Windows平台。

注意

• 你不应该依赖当前的连接状态来决定是否可以可靠地发起网络请求。始终要防范来自网络层的超时和错误。
• 连接类型的可用性并不能保证有互联网访问权限。例如，插件可能返回Wi-Fi连接类型，但它可能是没有互联网访问权限的连接（如酒店Wi-Fi网络，用户通常需要通过登录页面进行授权）。

平台支持

使用要求

• Flutter >=3.19.0
• Dart >=3.3.0 <4.0.0
• iOS >=12.0
• MacOS >=10.14
• Android compileSDK 34
• Java 17
• Android Gradle Plugin >=8.3.0
• Gradle wrapper >=8.4

使用方法

检查当前连接类型

以下是一个示例代码，用于检查当前可用的连接类型：

import 'package:connectivity_plus/connectivity_plus.dart';

void checkConnectivity() async {
  final List<ConnectivityResult> connectivityResult = await (Connectivity().checkConnectivity());

  if (connectivityResult.contains(ConnectivityResult.mobile)) {
    print("Mobile network available.");
  } else if (connectivityResult.contains(ConnectivityResult.wifi)) {
    print("Wi-fi is available.");
  } else if (connectivityResult.contains(ConnectivityResult.ethernet)) {
    print("Ethernet connection available.");
  } else if (connectivityResult.contains(ConnectivityResult.vpn)) {
    print("Vpn connection active.");
  } else if (connectivityResult.contains(ConnectivityResult.bluetooth)) {
    print("Bluetooth connection available.");
  } else if (connectivityResult.contains(ConnectivityResult.other)) {
    print("Connected to a network which is not in the above mentioned networks.");
  } else if (connectivityResult.contains(ConnectivityResult.none)) {
    print("No available network types");
  }
}

监听连接变化

你可以订阅插件提供的流以监听连接类型的更改：

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

class NetworkMonitor {
  StreamSubscription<List<ConnectivityResult>>? _subscription;

  void startListening() {
    _subscription = Connectivity().onConnectivityChanged.listen((List<ConnectivityResult> result) {
      // Received changes in available connectivity types!
      print('Connectivity changed: $result');
    });
  }

  void stopListening() {
    _subscription?.cancel();
  }
}

确保在不再需要监听时取消订阅。

示例应用

下面是一个完整的示例应用，展示了如何在Flutter应用中使用connectivity_plus插件来监测网络连接状态，并更新UI。

import 'dart:async';
import 'dart:developer' as developer;
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: const Color(0x9f4376f8),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<ConnectivityResult> _connectionStatus = [ConnectivityResult.none];
  final Connectivity _connectivity = Connectivity();
  late StreamSubscription<List<ConnectivityResult>> _connectivitySubscription;

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

    _connectivitySubscription =
        _connectivity.onConnectivityChanged.listen(_updateConnectionStatus);
  }

  @override
  void dispose() {
    _connectivitySubscription.cancel();
    super.dispose();
  }

  Future<void> initConnectivity() async {
    late List<ConnectivityResult> result;
    try {
      result = await _connectivity.checkConnectivity();
    } on PlatformException catch (e) {
      developer.log('Couldn\'t check connectivity status', error: e);
      return;
    }

    if (!mounted) {
      return Future.value(null);
    }

    return _updateConnectionStatus(result);
  }

  Future<void> _updateConnectionStatus(List<ConnectivityResult> result) async {
    setState(() {
      _connectionStatus = result;
    });
    print('Connectivity changed: $_connectionStatus');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Connectivity Plus Example'),
        elevation: 4,
      ),
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Spacer(flex: 2),
          Text(
            'Active connection types:',
            style: Theme.of(context).textTheme.headlineMedium,
          ),
          const Spacer(),
          ListView(
            shrinkWrap: true,
            children: List.generate(
                _connectionStatus.length,
                (index) => Center(
                      child: Text(
                        _connectionStatus[index].toString(),
                        style: Theme.of(context).textTheme.headlineSmall,
                      ),
                    )),
          ),
          const Spacer(flex: 2),
        ],
      ),
    );
  }
}

以上代码创建了一个简单的Flutter应用，启动时会初始化网络连接检测，并实时更新UI显示当前的网络连接类型。