Flutter数据同步插件powersync_flutter_libs的使用

Flutter数据同步插件powersync_flutter_libs的使用

简介

powersync_flutter_libs 是 PowerSync 的 Flutter 二进制文件。PowerSync 是一个用于在移动设备和服务器之间同步数据的库。它允许你在本地存储数据，并与远程服务器保持同步，确保数据的一致性和可靠性。

由于 powersync_flutter_libs 是 PowerSync 的 Flutter 版本，因此具体的文档和使用方法请参考 PowerSync 的官方文档。核心的 PowerSync 二进制文件是在 powersync-sqlite-core 中构建和发布的。

完整示例 Demo

以下是一个完整的示例，展示了如何在 Flutter 项目中使用 powersync_flutter_libs 进行数据同步。这个示例假设你已经安装了 powersync_flutter_libs 并且配置好了项目。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 powersync_flutter_libs 作为依赖：

dependencies:
  flutter:
    sdk: flutter
  powersync_flutter_libs: ^latest_version  # 请替换为最新版本号

然后运行 flutter pub get 来安装依赖。

2. 初始化 PowerSync

在你的 Flutter 应用中，你需要初始化 PowerSync。通常在 main.dart 文件中进行初始化：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化 PowerSync
  await PowerSync.initialize(
    databasePath: 'path_to_your_database',  // 替换为你的数据库路径
    serverUrl: 'https://your-server-url.com/api/sync',  // 替换为你的服务器 URL
    appId: 'your_app_id',  // 替换为你的应用 ID
  );

  runApp(MyApp());
}

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

3. 创建数据模型

接下来，创建一个数据模型类，用于表示你要同步的数据。例如，创建一个 Task 模型：

import 'package:powersync_flutter_libs/powersync_flutter_libs.dart';

class Task extends Model {
  String? title;
  bool? isCompleted;

  Task({this.title, this.isCompleted = false});

  // 从 Map 转换为 Task 对象
  Task.fromMap(Map<String, dynamic> map) {
    id = map['id'];
    title = map['title'];
    isCompleted = map['isCompleted'] == 1;
  }

  // 将 Task 对象转换为 Map
  [@override](/user/override)
  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'title': title,
      'isCompleted': isCompleted ? 1 : 0,
    };
  }
}

4. 同步数据

现在你可以使用 PowerSync 来同步数据。以下是一个简单的示例，展示了如何创建、更新和删除任务：

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

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

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _titleController = TextEditingController();
  List<Task> _tasks = [];

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

  // 获取所有任务
  Future<void> _fetchTasks() async {
    final tasks = await PowerSync.query<Task>();
    setState(() {
      _tasks = tasks;
    });
  }

  // 创建新任务
  Future<void> _createTask() async {
    final task = Task(title: _titleController.text);
    await PowerSync.create(task);
    _fetchTasks();
    _titleController.clear();
  }

  // 更新任务
  Future<void> _updateTask(Task task) async {
    task.isCompleted = !task.isCompleted!;
    await PowerSync.update(task);
    _fetchTasks();
  }

  // 删除任务
  Future<void> _deleteTask(Task task) async {
    await PowerSync.delete(task);
    _fetchTasks();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PowerSync Demo'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: _titleController,
              decoration: InputDecoration(
                labelText: '任务标题',
                suffixIcon: IconButton(
                  icon: Icon(Icons.add),
                  onPressed: _createTask,
                ),
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _tasks.length,
              itemBuilder: (context, index) {
                final task = _tasks[index];
                return ListTile(
                  title: Text(task.title!),
                  trailing: Checkbox(
                    value: task.isCompleted!,
                    onChanged: (value) => _updateTask(task),
                  ),
                  onLongPress: () => _deleteTask(task),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}