Flutter离线数据存储插件flutter_offline的使用

✈️ Flutter Offline

flutter_offline 是一个用于处理离线/在线连接状态的实用工具，支持iOS和Android平台。

🎖 安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_offline: "^4.0.0"

⚡️ 导入

在 Dart 文件中导入 flutter_offline 包：

import 'package:flutter_offline/flutter_offline.dart';

✔ 添加权限到 Manifest

对于 Android 平台，需要在 AndroidManifest.xml 中添加以下权限：

<uses-permission android:name="android.permission.INTERNET"/>

🎮 使用方法

示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_offline 插件来检测网络连接状态，并根据状态显示不同的UI。

main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Offline Demo',
      theme: ThemeData.dark(),
      home: Builder(
        builder: (BuildContext context) {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  navigate(context, const DemoPage());
                },
                child: const Text('Go to Demo Page'),
              ),
            ],
          );
        },
      ),
    );
  }

  void navigate(BuildContext context, Widget widget) {
    Navigator.of(context).push<void>(
      MaterialPageRoute<void>(
        builder: (BuildContext context) => widget,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Offline Demo"),
      ),
      body: OfflineBuilder(
        connectivityBuilder: (
          BuildContext context,
          ConnectivityResult connectivity,
          Widget child,
        ) {
          final bool connected = connectivity != ConnectivityResult.none;
          return Stack(
            fit: StackFit.expand,
            children: [
              Positioned(
                height: 24.0,
                left: 0.0,
                right: 0.0,
                child: Container(
                  color: connected ? Color(0xFF00EE44) : Color(0xFFEE4400),
                  child: Center(
                    child: Text("${connected ? 'ONLINE' : 'OFFLINE'}"),
                  ),
                ),
              ),
              Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'Yay!',
                    ),
                    Text(
                      'Just turn off your internet.',
                    ),
                  ],
                ),
              ),
            ],
          );
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'There are no buttons to push :)',
            ),
            Text(
              'Just turn off your internet.',
            ),
          ],
        ),
      ),
    );
  }
}

说明

1. 主界面：包含一个按钮，点击后跳转到 DemoPage 页面。
2. DemoPage：使用 OfflineBuilder 来监听网络连接状态。当网络连接状态发生变化时，会更新UI以显示当前的连接状态（在线或离线）。
3. UI更新：通过 Stack 和 Positioned 实现了一个顶部状态栏，显示当前的网络连接状态（绿色表示在线，红色表示离线）。

📷 截图

🐛 Bugs/Requests

如果您遇到任何问题，请随时在 GitHub 上提交 issue。如果您觉得这个库缺少某些功能，也可以在 GitHub 上提出需求，欢迎提交 pull request。

❗️ 注意

• 关于Flutter的帮助文档，请访问 Flutter官网。
• 编辑插件代码的帮助文档，请参考 编辑插件代码文档。

🤓 致谢

感谢 Simon Lightfoot (@slightfoot) 的贡献 👍。

⭐️ 许可证

MIT License