Flutter网络连接检测代码报错：参数类型不匹配问题排查

错误原因 #

你的代码中监听网络状态变化的回调函数参数类型定义错误：connectivity_plus的onConnectivityChanged返回的是单条ConnectivityResult数据的流，但你给的回调函数要求接收List类型参数，导致类型不兼容。

正确实现代码示例 #

1. 创建GetX控制器 #

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

class NetworkController extends GetxController {
  final Connectivity _connectivity = Connectivity();
  final Rx<ConnectivityResult> _connectionStatus = ConnectivityResult.none.obs;

  ConnectivityResult get connectionStatus => _connectionStatus.value;

  @override
  void onInit() {
    super.onInit();
    // 初始化获取当前网络状态
    _checkInitialConnection();
    // 监听网络状态变化，回调参数匹配ConnectivityResult类型
    _connectivity.onConnectivityChanged.listen(_updateConnectionStatus);
    // 也可以用GetX的ever方法监听响应式变量，处理状态变化逻辑
    // ever(_connectionStatus, (ConnectivityResult result) {
    //   print('当前网络状态：$result');
    // });
  }

  Future<void> _checkInitialConnection() async {
    final result = await _connectivity.checkConnectivity();
    _connectionStatus.value = result;
  }

  // 回调参数类型为ConnectivityResult，与流的输出类型匹配
  void _updateConnectionStatus(ConnectivityResult result) {
    _connectionStatus.value = result;
    // 网络状态变化后的业务逻辑
    if (result == ConnectivityResult.none) {
      Get.snackbar('提示', '网络连接已断开');
    } else {
      Get.snackbar('提示', '网络已恢复');
    }
  }

  @override
  void onClose() {
    // 取消监听，避免内存泄漏
    _connectivity.dispose();
    super.onClose();
  }
}

2. 在页面中使用控制器 #

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'network_controller.dart';

class NetworkPage extends StatelessWidget {
  final NetworkController controller = Get.put(NetworkController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('网络状态检测')),
      body: Center(
        // 通过Obx实现UI响应式更新
        child: Obx(() {
          switch (controller.connectionStatus) {
            case ConnectivityResult.wifi:
              return const Text('当前连接WiFi', style: TextStyle(fontSize: 20));
            case ConnectivityResult.mobile:
              return const Text('当前使用移动数据', style: TextStyle(fontSize: 20));
            case ConnectivityResult.none:
              return const Text('当前无网络连接', style: TextStyle(fontSize: 20, color: Colors.red));
            default:
              return const Text('未知网络状态', style: TextStyle(fontSize: 20));
          }
        }),
      ),
    );
  }
}

关键修正点 #

• 确保回调函数的参数类型为ConnectivityResult，与connectivity_plus流的输出类型一致
• 使用GetX的obs变量存储网络状态，通过Obx或ever实现响应式更新
• 控制器销毁时调用_connectivity.dispose()取消监听，防止内存泄漏

内容的提问来源于stack exchange，提问作者Mohamed Ali Youssef