如何在Flutter中根据网络连接状态显示带连接类型的Snackbar/Toast

步骤1：添加依赖 #

在pubspec.yaml中引入connectivity_plus包，用于监听设备网络状态：

dependencies:
  flutter:
    sdk: flutter
  connectivity_plus: ^5.0.1 # 建议使用最新版本

执行flutter pub get完成依赖安装。

步骤2：实现网络监听与Snackbar提示 #

创建一个StatefulWidget，在初始化阶段启动网络监听，根据状态变化展示对应风格的Snackbar：

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

class NetworkStatusSnackbar extends StatefulWidget {
  const NetworkStatusSnackbar({super.key});

  @override
  State<NetworkStatusSnackbar> createState() => _NetworkStatusSnackbarState();
}

class _NetworkStatusSnackbarState extends State<NetworkStatusSnackbar> {
  late Connectivity _connectivity;
  late StreamSubscription<ConnectivityResult> _subscription;

  @override
  void initState() {
    super.initState();
    _connectivity = Connectivity();
    // 初始检查网络状态
    _checkInitialStatus();
    // 监听网络状态变化
    _subscription = _connectivity.onConnectivityChanged.listen(_handleStatusChange);
  }

  Future<void> _checkInitialStatus() async {
    final status = await _connectivity.checkConnectivity();
    _showSnackbar(status);
  }

  void _handleStatusChange(ConnectivityResult status) {
    _showSnackbar(status);
  }

  void _showSnackbar(ConnectivityResult status) {
    // 清除之前的Snackbar，避免叠加
    ScaffoldMessenger.of(context).clearSnackBars();

    String message;
    Color bgColor;

    if (status == ConnectivityResult.none) {
      message = "网络已断开";
      bgColor = Colors.red;
    } else {
      final type = _getConnectionText(status);
      message = "已连接到$type";
      bgColor = Colors.green;
    }

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(message),
        backgroundColor: bgColor,
        duration: const Duration(seconds: 3),
      ),
    );
  }

  String _getConnectionText(ConnectivityResult status) {
    switch (status) {
      case ConnectivityResult.wifi:
        return "WiFi网络";
      case ConnectivityResult.mobile:
        return "蜂窝网络";
      case ConnectivityResult.ethernet:
        return "以太网";
      case ConnectivityResult.bluetooth:
        return "蓝牙网络";
      default:
        return "网络";
    }
  }

  @override
  void dispose() {
    _subscription.cancel(); // 取消监听，防止内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text("网络状态变化时自动弹出提示"),
      ),
    );
  }
}

步骤3：配置Android权限 #

在android/app/src/main/AndroidManifest.xml中添加网络状态权限：

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

iOS无需额外配置权限。

额外说明 #

• connectivity_plus仅判断设备是否连接网络，无法验证网络是否可访问（如WiFi已连接但无互联网），若需验证可用性，可结合dart:io的InternetAddress进行ping测试。
• 可根据需求调整Snackbar的duration，设置为Duration.infinite可让提示保持到用户手动关闭。
• 多页面应用中，可将网络监听逻辑封装到全局状态管理（如Provider、GetX）中，实现全局提示。

内容的提问来源于stack exchange，提问作者syofiazmi