flutter实战——获取网络状态和网络状态监听

问题背景

Android开发中，获取网络状态以及监听网络状态变化是很常见的场景，我们现在看看flutter中是如何获取网络状态以及监听网络状态变化的。

问题分析

flutter开发过程中，可以通过使用Connectivity插件来获取当前设备的联网状态，以及监听当前设备网络状态变化。

(1)加载Connectivity插件，首先去pub仓库搜索插件最新版本。 插件pub仓库搜索地址：https://pub.flutter-io.cn/packages?q=connectivity (2)将插件配置到项目中依赖 在flutter项目的pubspec.yaml中进行依赖的配置，代码如下：

environment:
  sdk: ">=2.10.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  ......
  dio: ^5.1.1
  connectivity_plus: ^3.0.3

问题解决

上面已经选择了需要的插件并在项目中进行了配置，下面直接上代码：

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


class Test extends StatefulWidget {
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  String _netType;

  @override
  void initState() {
    super.initState();
    // 设置网络变化监听
    connectListener();
    // 获取网络连接状态
    getConnectType();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("从URl地址获取图片"),
      ),
      body: Center(child: Column (
        children: [FadeInImage.assetNetwork(
          image: 'https://pics4.baidu.com/feed/5243fbf2b2119313af56cce8226df5dc91238d35.jpeg@f_auto?token=7b38c4759efb80674f097940c476bd95',
          placeholder: 'lib/assets/images/logo1.png',),
        Text(_netType == null ? "获取网络类型为空" : _netType)],
      )),
    );
  }

  /// 获取联网类型
  void getConnectType() async {
    var connectResult = await (Connectivity().checkConnectivity());

    if (connectResult == ConnectivityResult.mobile) {
      _netType = "4G";
    } else if (connectResult == ConnectivityResult.wifi) {
      _netType = "wifi";
    } else {
      _netType = "未连接";
    }
    setState(() {
    });
  }

  /// 判断网络是否连接
  Future<bool> isConnected() async {
    var connectResult = await (Connectivity().checkConnectivity());
    return connectResult != ConnectivityResult.none;
  }

  /// 设置网络切换监听
  connectListener() async {
    Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
      print(result);
    });
  }
}

运行结果如下：

手动改变手机的网络连接状态，观察控制台打印信息： 显然，到这里我们已经实现了flutter项目中对设备网络状态的获取以及对网络状态变化的监听。 如果项目添加依赖后使用热重载的方式运行，可能会报错如下： Unhandled Exception: MissingPluginException(No implementation found for ********)

解决方案： 其实 Flutter 的 “hot reload” 技术虽然为我们的开发提供了极大的便利，但它也不是万能的。 我们新添加的插件包就无法直接通过热重载打入手机应用包中，有的人会尝试直接点击绿色向右小三角安装，这样也是无法实现重新编译打包安装到手机的，这个时候你必须停止掉应用(红色小正方形按钮)，再重新点击安装才行。

问题总结

本文初步介绍了flutter中是如何获取网络状态以及监听网络状态变化的，有兴趣的同学可以进一步深入研究。