Flutter中使用connectivity实现网络检测

越陌度阡

发布于 2021-01-29 10:38:38

1.7K00

代码可运行

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

运行总次数：0

代码可运行

1. 安装插件

配置 connectivity 插件。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  date_format: ^1.0.6
  flutter_cupertino_date_picker: ^1.0.26+2 
  flutter_swiper: ^1.1.6
  fluttertoast: ^7.1.6
  http: ^0.12.2
  dio: ^3.0.10
  flutter_html: ^1.1.0
  flutter_inappwebview: ^4.0.0+4
  device_info: ^1.0.0
  amap_location: ^0.2.0
  image_picker: ^0.6.7+21
  video_player: ^1.0.1
  chewie: ^0.12.2

  # 网络检测
  connectivity: ^2.0.2

在pubspec.yaml中配置保存后，在VS Code环境中会自动下载依赖包。

如果无法正常下载，执行 flutter pub get 。

2. 引入依赖

在需要用到的该插件的文件中引入插件包。

import 'package:connectivity/connectivity.dart';

3. 使用插件

// 定义事件
var subscription;
// 网络提示
String _stateText;

// 初始化状态
@override
void initState() {
    super.initState();

    // 官方代码
    subscription = Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
        // WIFI网络
        if(result==ConnectivityResult.wifi){
            setState(() {
                _stateText="当前为WIFI网络";
            });
        // 移动网络
        }else if(result==ConnectivityResult.mobile){
            setState(() {
                _stateText="当前为手机网络";
            });
        // 没有网络
        }else{
            setState(() {
                _stateText="当前没有网络";
            });
        }
    });
}

// 消毁组件
@override
dispose() {
    super.dispose();
    // 消毁组件
    subscription.cancel();
}

4. 完整实例

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

class NetworkPage extends StatefulWidget {
    NetworkPage({Key key}) : super(key: key);
    @override
    _NetworkPageState createState() => _NetworkPageState();
}
class _NetworkPageState extends State<NetworkPage> {

    // 定义事件
    var subscription;
    // 网络提示
    String _stateText;

    // 初始化状态
    @override
    void initState() {
        super.initState();

        // 官方代码
        subscription = Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
            // WIFI网络
            if(result==ConnectivityResult.wifi){
                setState(() {
                    _stateText="当前为WIFI网络";
                });
            // 移动网络
            }else if(result==ConnectivityResult.mobile){
                setState(() {
                    _stateText="当前为手机网络";
                });
            // 没有网络
            }else{
                setState(() {
                    _stateText="当前没有网络";
                });
            }
        });
    }
    
    // 消毁组件
    @override
    dispose() {
        super.dispose();
        // 消毁组件
        subscription.cancel();
    }


    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title:Text("检测网络变化")
            ),
            body:Center(
                child:Text("${_stateText}")
            )
        );
    }
}

参考：

https://pub.flutter-io.cn/packages/connectivity

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/01/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

flutter