Flutter_学习记录_connectivity_plus 检测网络

  1. 引入插件
    官方网址:https://pub.dev/packages/connectivity_plus
  2. 导入头文件
dart 复制代码
import 'package:connectivity_plus/connectivity_plus.dart';
  1. StreamSubscription订阅网络监听
dart 复制代码
late StreamSubscription<List<ConnectivityResult>> _subscription;

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

    // 必须要有订阅,如果没有订阅的话,那下次再进来,就检测不到网络的变化了
    _subscription =  Connectivity().onConnectivityChanged.listen((List<ConnectivityResult> result){
      print(result);
      if (result.contains(ConnectivityResult.wifi)) {
        setState(() {
          _stateText = "网络连接的Wifi";
        });
      } else if (result.contains(ConnectivityResult.none)) {
        setState(() {
          _stateText = "没有网络连接";
        });
      } else {
        setState(() {
          _stateText = "检测中";
        });
      }
    });
  }
  1. dispose时,取消订阅
dart 复制代码
@override void dispose() { 
    _subscription.cancel();
    super.dispose(); 
  }
  1. 完整代码案例
dart 复制代码
import 'dart:async';

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

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

  @override
  State<ConnectivityDemo> createState() => _ConnectivityDemoState();
}

class _ConnectivityDemoState extends State<ConnectivityDemo> {
  late StreamSubscription<List<ConnectivityResult>> _subscription;
  String _stateText = "检测网络中";

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

    // 必须要有订阅,如果没有订阅的话,那下次再进来,就检测不到网络的变化了
    _subscription =  Connectivity().onConnectivityChanged.listen((List<ConnectivityResult> result){
      print(result);
      if (result.contains(ConnectivityResult.wifi)) {
        setState(() {
          _stateText = "网络连接的Wifi";
        });
      } else if (result.contains(ConnectivityResult.none)) {
        setState(() {
          _stateText = "没有网络连接";
        });
      } else {
        setState(() {
          _stateText = "检测中";
        });
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("网络监听"),
      ),
      body: Center(child: Text(_stateText)),
    );
  }
}
  1. 效果图如下:
相关推荐
向哆哆9 小时前
打造高校四六级报名管理系统:基于 Flutter × OpenHarmony 的跨端开发实践
flutter·开源·鸿蒙·openharmony·开源鸿蒙
2501_940007899 小时前
Flutter for OpenHarmony三国杀攻略App实战 - 设置功能实现
flutter
lbb 小魔仙10 小时前
【Harmonyos】开源鸿蒙跨平台训练营DAY9:获取分类数据并渲染
flutter·华为·harmonyos
mocoding10 小时前
Flutter 3D 翻转动画flip_card三方库在鸿蒙版天气预报卡片中的实战教程
flutter·3d·harmonyos
2601_9498095912 小时前
flutter_for_openharmony家庭相册app实战+我的Tab实现
java·javascript·flutter
2601_9498683612 小时前
Flutter for OpenHarmony 电子合同签署App实战 - 已签合同实现
java·开发语言·flutter
一起养小猫13 小时前
Flutter for OpenHarmony 实战:别踩白方块游戏完整开发指南
flutter·游戏
●VON14 小时前
Flutter for OpenHarmony 21天训练营 Day03 总结:从学习到输出,迈出原创第一步
学习·flutter·openharmony·布局·技术
程序员清洒14 小时前
Flutter for OpenHarmony:Text — 文本显示与样式控制
开发语言·javascript·flutter
雨季66615 小时前
Flutter 三端应用实战:OpenHarmony 简易“动态内边距调节器”交互模式深度解析
javascript·flutter·ui·交互·dart