Flutter网络连接状态检测插件connectivity_service的使用

特性

Coneectivity Service 用于通过 provider 检查互联网连接状态。

安装

将最新版本的包添加到你的 pubspec.yaml 文件中（然后运行 dart pub get）：
```
dependencies:
  connectivity_service: ^0.0.3
```

导入包并在你的 Flutter 应用中使用它。

import 'package:connectivity_service/connectivity_service.dart';

示例

在 Material 应用中添加 provider。

import 'package:flutter/material.dart';

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

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

  // 这个 widget 是你应用的根组件。
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        StreamProvider<ConnectivitySatus>(
            create: (context) => ConeectivityService().connectionStatusController.stream,
            initialData: ConnectivitySatus.offline)
      ],
      child: MaterialApp(
        title: 'Flutter 应用程序',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const Homepage(),
      ),
    );
  }
}

然后在你需要的地方添加 NetworkSensitive 组件。

import 'package:connectivity_service/enum/network_sensitivity.dart';
import 'package:flutter/material.dart';

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

  @override
  State<Homepage> createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: NetworkSensitive(
          child: Text('Your design here'), // 你可以在这里添加任何设计
        ),
      ),
    );
  }
}

在 NetworkSensitive 页面中，你可以创建自己的离线部分的设计。目前它是简单的文本 “No Internet!”，但你可以根据需要进行设计。

import 'package:flutter/material.dart';

class NetworkSensitive extends StatelessWidget {
  final Widget child;

  NetworkSensitive({required this.child});

  @override
  Widget build(BuildContext context) {
    final connectivityStatus = Provider.of<ConnectivitySatus>(context);
    return connectivityStatus == ConnectivitySatus.online
        ? child
        : Center(
            child: Text('No Internet!'), // 可以根据需要替换为其他设计
          );
  }
}

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

h691938207 1楼

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

在Flutter中，检测设备的网络连接状态是一个常见的需求。connectivity_plus 是一个常用的插件，用于检测设备的网络连接状态。虽然你提到的是 connectivity_service，但实际上在Flutter生态中，最常用的是 connectivity_plus 插件。下面是如何使用 connectivity_plus 插件来检测网络连接状态的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 connectivity_plus 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  connectivity_plus: ^2.3.0

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 connectivity_plus 插件：

import 'package:connectivity_plus/connectivity_plus.dart';

3. 检测网络连接状态

你可以使用 Connectivity 类来检测当前的网络连接状态。以下是一个简单的例子：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NetworkCheckScreen(),
    );
  }
}

class NetworkCheckScreen extends StatefulWidget {
  [@override](/user/override)
  _NetworkCheckScreenState createState() => _NetworkCheckScreenState();
}

class _NetworkCheckScreenState extends State<NetworkCheckScreen> {
  String _connectionStatus = 'Unknown';

  [@override](/user/override)
  void initState() {
    super.initState();
    _checkConnection();
    _subscribeToConnectionChanges();
  }

  Future<void> _checkConnection() async {
    var connectivityResult = await (Connectivity().checkConnectivity());
    _updateConnectionStatus(connectivityResult);
  }

  void _subscribeToConnectionChanges() {
    Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
      _updateConnectionStatus(result);
    });
  }

  void _updateConnectionStatus(ConnectivityResult result) {
    setState(() {
      if (result == ConnectivityResult.mobile) {
        _connectionStatus = 'Mobile';
      } else if (result == ConnectivityResult.wifi) {
        _connectionStatus = 'WiFi';
      } else if (result == ConnectivityResult.none) {
        _connectionStatus = 'No Internet';
      } else {
        _connectionStatus = 'Unknown';
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Connection Check'),
      ),
      body: Center(
        child: Text('Connection Status: $_connectionStatus'),
      ),
    );
  }
}