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

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

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

需要一个优秀的Flutter开发者？我可用

connectivity_builder 包提供了一种简单且方便的方式来根据您的Flutter应用的网络连接状态管理不同的UI状态。

特性

  • 轻松的UI适应：无需手动进行网络检查即可为在线和离线场景构建不同的小部件。
  • 实时网络监控：自动检测并响应网络连接变化，确保无缝的用户体验。
  • 轻量级且易于使用：可以轻松地将包集成到现有的Flutter应用中，几乎不需要任何额外的工作。

入门指南

安装
  1. 在 pubspec.yaml 文件中添加 connectivity_builder 包：
dependencies:
  connectivity_builder: ^latest_version
  1. 运行 flutter pub get 来安装包。
使用

ConnectivityBuilder 小部件提供了根据网络连接状态管理UI状态的一种简单方法：

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: ConnectivityBuilder(
        onlineBuilder: (context) => Center(child: Text('ONLINE 🌍')),
        offlineBuilder: (context) => Center(child: Text('OFFLINE 🚫')),
      ),
    ),
  );
}

这将在设备离线时显示一条“无互联网连接可用”的消息，并在设备在线时显示应用的主要内容。

其他信息

贡献

欢迎对 connectivity_builder 包进行贡献！更多详细信息，请阅读 贡献指南。

报告问题

如果您遇到任何错误或有改进建议，请在GitHub仓库上提交一个问题。

许可证

该项目采用MIT许可证。

完整示例Demo

以下是一个完整的示例代码，展示了如何使用 connectivity_builder 包来管理网络连接状态。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ConnectivityBuilder(
          offlineBuilder: (context) => const Center(
            child: Text('No internet connection!'),
          ),
          onlineBuilder: (context) => const Center(
            child: Text('Internet connection available'),
          ),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter应用中使用connectivity_builder插件来检测网络连接状态的示例代码。connectivity_builder是一个方便的Flutter包，它结合了connectivity插件和Builder小部件，用于在网络状态变化时重建UI。

首先，你需要在你的pubspec.yaml文件中添加connectivity依赖项，因为connectivity_builder依赖于它：

dependencies:
  flutter:
    sdk: flutter
  connectivity: ^4.0.0  # 请检查最新版本
  connectivity_builder: ^2.0.0  # 请检查最新版本

然后，运行flutter pub get来获取这些依赖项。

接下来，你可以在你的Flutter应用中使用ConnectivityBuilder来检测网络连接状态。以下是一个完整的示例：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Connectivity Builder Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ConnectivityBuilder(
          builder: (BuildContext context, ConnectivityResult connectivityResult, Widget? child) {
            // 根据网络连接状态返回不同的Widget
            if (connectivityResult == ConnectivityResult.wifi || connectivityResult == ConnectivityResult.mobile) {
              return Center(
                child: Text('You are connected to the internet!'),
                style: TextStyle(fontSize: 24, color: Colors.green),
              );
            } else {
              return Center(
                child: Text('You are NOT connected to the internet!'),
                style: TextStyle(fontSize: 24, color: Colors.red),
              );
            }
          },
          child: Center(
            child: CircularProgressIndicator(), // 当检测网络状态时显示的加载指示器
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 在pubspec.yaml文件中添加了connectivity和connectivity_builder依赖项。
  2. 在MyApp中创建了一个基本的Flutter应用。
  3. 在MyHomePage中使用了ConnectivityBuilder。ConnectivityBuilder接受一个builder函数，该函数根据当前的ConnectivityResult返回不同的Widget。
  4. 当应用检测到网络连接时（无论是WiFi还是移动数据），它会显示一条绿色的消息说用户已连接到互联网。如果没有网络连接，它会显示一条红色的消息说用户未连接到互联网。
  5. 在检测网络状态时，显示一个CircularProgressIndicator作为加载指示器。

这个示例展示了如何使用connectivity_builder来简化网络连接状态的检测，并根据状态变化动态更新UI。

回到顶部