Flutter网络连接检测插件flutter_network_connectivity的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter网络连接检测插件flutter_network_connectivity的使用

插件简介

Flutter Network Connectivity 是一个用于检查互联网可用性的Flutter插件。它基于网络连接状态、定期间隔或按需调用来提供服务。该插件支持通过流的方式监听网络变化,也可以即时查询当前网络状态。

安装与配置

添加依赖

首先,在你的 pubspec.yaml 文件中添加 flutter_network_connectivity 作为依赖项:

dependencies:
  flutter_network_connectivity: ^0.0.6

然后执行 flutter pub get 来获取并安装新添加的包。

导入库

在需要使用的Dart文件顶部导入插件:

import 'package:flutter_network_connectivity/flutter_network_connectivity.dart';

使用方法

创建实例

创建一个 FlutterNetworkConnectivity 对象,并根据需求设置参数:

FlutterNetworkConnectivity flutterNetworkConnectivity = FlutterNetworkConnectivity(
  isContinousLookUp: true,  // 是否持续检测,默认为true
  lookUpDuration: const Duration(seconds: 5),  // 检测间隔时间,默认为5秒
  lookUpUrl: 'example.com',  // 用于检测的URL,默认为'example.com'
);

监听网络状态变化(流)

为了实时监控网络状态的变化,可以订阅插件提供的流:

_flutterNetworkConnectivity.getInternetAvailabilityStream().listen((isInternetAvailable) {
  // 当网络状态发生变化时,这里会接收到最新的状态
});

注册和注销监听器:

await _flutterNetworkConnectivity.registerAvailabilityListener();
// ...
await _flutterNetworkConnectivity.unregisterAvailabilityListener();

即时查询网络状态

如果你只需要在特定时刻检查一次网络是否可用,可以调用以下方法:

bool _isNetworkConnectedOnCall = await 
    _flutterNetworkConnectivity.isInternetConnectionAvailable();

示例代码

下面是一个完整的示例程序,展示了如何将上述功能集成到一个简单的Flutter应用中:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_network_connectivity/flutter_network_connectivity.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final FlutterNetworkConnectivity _flutterNetworkConnectivity =
      FlutterNetworkConnectivity(
    isContinousLookUp: true,
    lookUpDuration: const Duration(seconds: 5),
    lookUpUrl: 'example.com',
  );

  bool? _isInternetAvailableOnCall;
  bool? _isInternetAvailableStreamStatus;

  StreamSubscription<bool>? _networkConnectionStream;

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

    _flutterNetworkConnectivity.getInternetAvailabilityStream().listen((event) {
      _isInternetAvailableStreamStatus = event;
      setState(() {});
    });

    init();
  }

  @override
  void dispose() async {
    _networkConnectionStream?.cancel();
    _flutterNetworkConnectivity.unregisterAvailabilityListener();
    super.dispose();
  }

  void init() async {
    await _flutterNetworkConnectivity.registerAvailabilityListener();
  }

  Future<void> _checkInternetAvailability() async {
    try {
      _isInternetAvailableOnCall =
          await _flutterNetworkConnectivity.isInternetConnectionAvailable();
    } on PlatformException {
      _isInternetAvailableOnCall = null;
    }

    if (!mounted) return;

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Network Connectivity'),
        ),
        body: Column(
          children: [
            Expanded(
              child: Container(
                color: Colors.black12,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const SizedBox(height: 24.0),
                      const Text(
                        'Internet Availability Stream',
                        style: TextStyle(fontSize: 16.0),
                        textAlign: TextAlign.center,
                      ),
                      Expanded(
                        child: Center(
                          child: Text(
                            null == _isInternetAvailableStreamStatus
                                ? 'Unknown State'
                                : _isInternetAvailableStreamStatus!
                                    ? "You're Connected to Network"
                                    : "You're Offline",
                            style: const TextStyle(fontSize: 18.0, fontWeight: FontWeight.w600),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.lightGreen.shade400,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const SizedBox(height: 24.0),
                      const Text(
                        'Internet Availability Status on Call',
                        style: TextStyle(fontSize: 16.0),
                      ),
                      Expanded(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              null == _isInternetAvailableOnCall
                                  ? 'Unknown State'
                                  : _isInternetAvailableOnCall!
                                      ? "You're Connected to Network"
                                      : "You're Offline",
                              style: const TextStyle(fontSize: 18.0, fontWeight: FontWeight.w600),
                            ),
                            const SizedBox(height: 50.0),
                            ElevatedButton(
                              onPressed: _checkInternetAvailability,
                              style: ElevatedButton.styleFrom(primary: Colors.amberAccent),
                              child: const Text(
                                'Check Network State',
                                style: TextStyle(color: Colors.black),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

此示例展示了如何使用 flutter_network_connectivity 插件来监测网络连接状态,并根据不同的场景显示相应的提示信息。用户可以通过点击按钮手动检查当前的网络状况,同时也能看到自动更新的网络状态变化。


更多关于Flutter网络连接检测插件flutter_network_connectivity的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网络连接检测插件flutter_network_connectivity的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用flutter_network_connectivity插件来检测网络连接的代码示例。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加flutter_network_connectivity依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_network_connectivity: ^3.0.0  # 请检查最新版本号

2. 导入包

在你的Dart文件中,导入flutter_network_connectivity包:

import 'package:flutter_network_connectivity/flutter_network_connectivity.dart';

3. 初始化插件

在你的主文件(例如main.dart)中,初始化插件并监听网络连接状态的变化:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Network Connectivity Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ConnectivityChecker(),
    );
  }
}

class ConnectivityChecker extends StatefulWidget {
  @override
  _ConnectivityCheckerState createState() => _ConnectivityCheckerState();
}

class _ConnectivityCheckerState extends State<ConnectivityChecker> {
  final Connectivity _connectivity = Connectivity();
  String _connectionStatus = 'Unknown';

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

  Future<void> initConnectivity() async {
    ConnectivityResult result = await _connectivity.checkConnectivity();
    setState(() {
      _connectionStatus = result.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Connectivity Status'),
      ),
      body: Center(
        child: Text(
          'Connection Status: $_connectionStatus',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

4. 运行应用

确保你已经连接了设备或启动了模拟器,然后运行flutter run来启动你的应用。

解释

  • 依赖添加:在pubspec.yaml中添加flutter_network_connectivity依赖。
  • 包导入:在需要检测网络连接的Dart文件中导入flutter_network_connectivity包。
  • 初始化插件:在initState方法中调用initConnectivity方法来获取当前的网络连接状态,并设置监听器来监听网络连接状态的变化。
  • UI更新:使用setState方法来更新UI,以显示当前的网络连接状态。

这样,你的Flutter应用就可以实时检测并显示网络连接状态了。

回到顶部