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

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

是否在寻找一种简单的方法来在您的Flutter应用中显示当前的网络连接状态？请查看Dart编程语言的软件包仓库pub.dev上的"connectivity_plus_widget"包！

此插件提供了一个可自定义的小部件，当没有互联网连接时会自动显示，并且当连接恢复时会自动消失。您还可以自定义小部件的属性，并传递自己的小部件来使用。此外，该插件允许您在应用的任何位置使用connectivity plus小部件。

如果您想简化Flutter应用中网络连接的管理，不妨试试"connectivity_plus_widget"插件。它可能会为您节省开发过程中的时间和精力！

特性

• 当没有互联网连接时，小部件会自动显示。
• 当有互联网连接时，小部件会自动消失。
• 您可以自定义connectivity plus小部件的属性。
• 您可以传递自己的小部件。
• 您可以在应用的任何位置使用connectivity plus小部件。
• 您也可以在调用API或进行任何网络操作之前检查互联网状态。
• 插件还支持跑马灯文字。

使用方法

在添加依赖后，在主函数中添加以下代码以启用整个应用的连接检查流：

WidgetsFlutterBinding.ensureInitialized();
ConnectivityPlusService().initConnectivityService();

示例代码

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  ConnectivityPlusService().initConnectivityService();
  runApp(const MyApp());
}

调用小部件

ConnectivityPlusWidget(
  backgroundColor: Colors.red,
  height: 40,
  marquee: false,
  textStyle: const TextStyle(fontSize: 20, color: Colors.white),
),

ConnectivityPlusCustomWidget(
  customWidget: const Center(
    child: Icon(Icons.wifi_off_outlined, color: Colors.red, size: 100),
  ),
),

ConnectivityPlusWidget(
  backgroundColor: Colors.orange,
  height: 40,
  marquee: true,
  textStyle: const TextStyle(fontSize: 20, color: Colors.white),
  decoration: BoxDecoration(
    color: Colors.orange,
    borderRadius: BorderRadius.only(
      topLeft: const Radius.circular(20.0),
      topRight: const Radius.circular(20.0)
    )
  ),
),

检查互联网状态

如果您想在调用API或执行任何网络操作之前检查互联网状态，请调用ConnectivityPlusService的getInternetStatus函数，该函数将返回一个布尔值。

log(ConnectivityPlusService().getInternetStatus().toString(), name: "status");

示例代码：main.dart

import 'package:connectivity_plus_widget/connectivity/connectivity_plus_service.dart';
import 'package:connectivity_plus_widget/connectivity/connectivity_widget.dart';
import 'package:flutter/material.dart';
import 'dart:developer';
import 'package:flutter/cupertino.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  ConnectivityPlusService().initConnectivityService();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Connectivity Plus Widget Example',
      home: Screen1(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          body: Column(
        children: [
          ConnectivityPlusWidget(
            backgroundColor: Colors.red,
            height: 40,
            marquee: false,
            textStyle: const TextStyle(fontSize: 20, color: Colors.white),
          ),
          const Spacer(),
          ConnectivityPlusWidget(
            width: 300,
            backgroundColor: Colors.grey,
            textStyle: const TextStyle(fontSize: 20),
          ),
          const Spacer(),
          ConnectivityPlusWidget(
            backgroundColor: Colors.orange,
            height: 100,
            notConnectedText: "Custom Text",
            marquee: true,
            textStyle: const TextStyle(fontSize: 30, color: Colors.white),
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              border: Border.all(
                width: 10,
                color: Colors.red,
              ),
            ),
          ),
          const Spacer(),
          ConnectivityPlusCustomWidget(
            customWidget: Center(
              child: Container(
                child: const Center(child: Text("Custom Widget ")),
                height: 100,
                width: 300,
                decoration: BoxDecoration(
                  color: Colors.greenAccent,
                  border: Border.all(
                    width: 10,
                    color: Colors.black,
                  ),
                ),
              ),
            ),
          ),
          const Spacer(),
          CupertinoButton(
              child: const Text("点击这里检查互联网状态"),
              onPressed: () {
                log(ConnectivityPlusService().getInternetStatus().toString(), name: "status");
              }),
          Container(
            margin: const EdgeInsets.all(20),
            child: ConnectivityPlusWidget(
              notConnectedText: "无网络",
              marquee: false,
              padding: const EdgeInsets.all(10),
              backgroundColor: Colors.orange,
              height: 50,
              textStyle: const TextStyle(fontSize: 20, color: Colors.red),
              decoration: BoxDecoration(
                color: Colors.amberAccent,
                borderRadius: BorderRadius.all(
                  const Radius.circular(40.0),
                ),
              ),
            ),
          ),
          const Spacer(),
          ConnectivityPlusCustomWidget(
            customWidget: const Center(
              child: Icon(
                Icons.wifi_off_outlined,
                color: Colors.red,
                size: 100,
              ),
            ),
          ),
          const Spacer(),
          ConnectivityPlusWidget(
            backgroundColor: Colors.orange,
            height: 40,
            marquee: true,
            textStyle: const TextStyle(fontSize: 20, color: Colors.white),
            decoration: BoxDecoration(
              color: Colors.orange,
              borderRadius: BorderRadius.only(
                topLeft: const Radius.circular(20.0),
                topRight: const Radius.circular(20.0)
              )
            ),
          ),
          ConnectivityPlusWidget(
            backgroundColor: Colors.red,
            height: 40,
            marquee: true,
            textStyle: const TextStyle(fontSize: 20, color: Colors.white),
          ),
        ],
      )),
    );
  }
}