【Flutter】 列表页网络监听

1 pubspec.yaml 引入 connectivity: ^0.3.2

dependencies:
  flutter:
    sdk: flutter
 	 connectivity: ^0.3.2

2 引用头文件

import 'package:connectivity/connectivity.dart';

3 Demo 实现

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _connectionStatus = 'Unknown';
  final Connectivity _connectivity = Connectivity();
  StreamSubscription<ConnectivityResult> _connectivitySubscription;

  @override
  void initState() {
    super.initState();
    initConnectivity();
    _connectivitySubscription =
        _connectivity.onConnectivityChanged.listen((ConnectivityResult result) {
          setState(() => _connectionStatus = result.toString());
        });
  }

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

  //平台消息是异步的，所以我们用异步方法初始化。
  Future<Null> initConnectivity() async {
    String connectionStatus;
    //平台消息可能会失败，因此我们使用Try/Catch PlatformException。
    try {
      connectionStatus = (await _connectivity.checkConnectivity()).toString();
    } on PlatformException catch (e) {
      print(e.toString());
      connectionStatus = 'Failed to get connectivity.';
    }

    // 如果在异步平台消息运行时从树中删除了该小部件，
    // 那么我们希望放弃回复，而不是调用setstate来更新我们不存在的外观。
    if (!mounted) {
      return;
    }

    setState(() {
      _connectionStatus = connectionStatus;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Column (
        children: [
          netWidget(context),
          Text('Connection Status: $_connectionStatus\n'),
        ],
      )
    );
  }

  @override
  Widget netWidget(BuildContext context) {
    ValueNotifier<String> _name = ValueNotifier<String>(_connectionStatus);

    return ValueListenableBuilder(
        valueListenable: _name,
        builder: (BuildContext context, String hasNet, Widget child) {
          if (!hasNet.contains("ConnectivityResult.none")) {
            return Container();
          }
          final Color r = Color(0xFFF96137);
          Icon icon = Icon(Icons.person, size: 12, color: r);
          String tips = "当前网络异常";
          Row row = Row(
            children: <Widget>[icon, Container(width: 6), Text(tips, style: TextStyle(fontSize: 12, color: r))],
          );
          return Container(height: 34.0, color: Color(0x1AF96137), child: row, padding: EdgeInsets.only(left: 16, right: 16));
        });
  }
}