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

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

connectivity_wall 是一个用于监控网络连接状态的小部件。它可以重定向用户到离线页面或在线页面。

开始使用

connectivity_wall 可以帮助你在应用中处理网络连接状态的变化。通过配置一些参数，你可以实现当用户断开网络连接时展示一个特定的页面，并在重新连接时恢复原页面。

示例代码

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

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 应用的主题颜色。
        primarySwatch: Colors.blue,
      ),
      home: ConnectivityWall(
        pingInterval: 120, // 检测网络连接的间隔时间（秒）。
        responseCode: [200], // 预期的响应码。
        onPingUrl: Uri.parse("https://pub.dev/"), // 用于检测网络连接的URL。

        /// 当网络连接时显示的页面。
        onConnectedWall: MyHomePage(title: 'Flutter Demo Home Page'),

        /// 网络连接状态改变时的回调函数。
        onConnectivityChanged: (result) {
          // ConnectivityResult.mobile
          // ConnectivityResult.wifi
          // ConnectivityResult.none
          print(result);
        },

        /// 当网络断开连接时的回调函数。
        onDisconnected: () {
          print("Offline, do something");
        },

        /// 当网络断开连接时显示的页面。
        onDisconnectedWall: OfflineState(),
      ),
    );
  }
}

class OfflineState extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: Center(
          child: Text("未连接到互联网"),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  // 这个小部件是应用的首页。它是一个有状态的小部件，意味着它的状态可以通过State对象来影响其外观。
  
  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 调用setState告诉Flutter框架某些东西已经改变，这会导致build方法被重新调用，以便更新UI。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '你已经点击了按钮这么多次:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: Icon(Icons.add),
      ),
    );
  }
}