专栏首页iOS小生活Flutter 检测网络连接

Flutter 检测网络连接

我们使用 connectivity 这个插件来监测网络。

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

class ConnectivityPage extends StatefulWidget {
  ConnectivityPage({Key key}) : super(key: key);

  _ConnectivityPageState createState() => _ConnectivityPageState();
}

class _ConnectivityPageState extends State<ConnectivityPage> {
  //网络状态描述
  String _connectStateDescription;

  var subscription;

  @override
  void initState() {
    super.initState();
    //监测网络变化
    subscription = Connectivity()
        .onConnectivityChanged
        .listen((ConnectivityResult result) {
      if (result == ConnectivityResult.mobile) {
        setState(() {
          _connectStateDescription = "手机网络";
        });
      } else if (result == ConnectivityResult.wifi) {
        setState(() {
          _connectStateDescription = "Wifi网络";
        });
      } else {
        setState(() {
          _connectStateDescription = "无网络";
        });
      }
      print(_connectStateDescription);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("监测网络")),
      body: Center(
        // 显示网络状态
        child: Text("$_connectStateDescription"),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    //在页面销毁的时候一定要取消网络状态的监听
    subscription.cancle();
  }
}

效果如下:

以上。

本文分享自微信公众号 - iOS小生活(iOSHappyLife)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter | 如何实现一个水波纹扩散效果的 Widget

    1.首先要有一个圆2.这个圆会边扩散边消失3.当这个圆扩散到一定程度的时候再绘制一个圆4.有限循环 / 无限循环5.可以有 / 无 Child

    Flutter笔记
  • 【Flutter 专题】59 图解 Android Native 获取 Flutter 资源文件

    和尚前段时间研究了 Android Native 与 Flutter 之间的交互;若两端均需要相同资源文件,若不能共享则势必会增加整体包大小;今天...

    阿策
  • Flutter 中的Dialog

    在Flutter中,各种提示框、弹出框是如何实现的呢?今天我们就来聊一聊这个问题。

    拉维
  • 革命性web前端框架Flutter详细介绍和学习路径

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutte...

    Javanx
  • Flutter vs React Native

    随着移动应用的需求越来越大,许多企业开始将焦点转移到移动应用的开发上。通过引入新技术、新平台和新框架,移动应用开发者能够创建划时代的移动应用。

    javascript.shop
  • Flutter 中的下拉刷新和上拉加载

    在Flutter的官方SDK中给我们提供了下拉刷新的组件RefreshIndicator,但是没有提供上拉分页加载更多的组件。不过不用担心,在Flutter的L...

    拉维
  • Flutter浪潮下的音视频研发探索

    大家好,我是阿里巴巴闲鱼事业部的陈炉军,本次分享的主题是Flutter浪潮下的音视频研发探索,主要内容是针对闲鱼APP在当下流行的跨平台框架Flutter的大规...

    LiveVideoStack
  • Flutter 新零售电商App UI界面设计与开发

    使用Flutter开发跨平台UI界面,快速高效,可谓神器。一套代码开发出来,在IOS和Android上面都能运行流畅,网上关于Flutter入门博客已不少了,但...

    arcticfox
  • 用Flutter构建漂亮的UI界面 – 基础组件篇

    Flutter作为时下最流行的技术之一,凭借其出色的性能以及抹平多端的差异优势,早已引起大批技术爱好者的关注,甚至一些闲鱼,美团,腾讯等大公司均已开始使用。虽然...

    Javanx
  • Flutter中的轮播图组件

    今天我们来介绍一款Flutter的第三方组件库——flutter_swiper。

    拉维

扫码关注云+社区

领取腾讯云代金券