pocketbase在flutter中如何使用

在Flutter项目中集成PocketBase时遇到几个问题想请教：

  1. 如何正确安装和配置PocketBase的Dart/Flutter客户端？官方文档提到的依赖添加后无法正常同步
  2. 实现用户认证时，登录/注册接口总是返回400错误，能否提供完整的身份验证代码示例？
  3. 实时订阅数据更新的最佳实践是什么？尝试过pb.collection('posts').subscribe()但收不到回调
  4. 文件上传到Storage时如何获取进度回调？目前只能通过Future等待完成
  5. 有没有推荐的状态管理方案配合PocketBase使用？比如Provider或Riverpod的整合示例

项目用的Flutter 3.19和PocketBase v0.22，希望能得到具体代码片段指导。


更多关于pocketbase在flutter中如何使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

2 回复

在Flutter中使用PocketBase，需先添加依赖到pubspec.yaml：

dependencies:
  pocketbase: ^0.8.0

然后导入并初始化：

import 'package:pocketbase/pocketbase.dart';

final pb = PocketBase('http://127.0.0.1:8090');

可进行认证、CRUD操作等。例如查询记录：

final result = await pb.collection('posts').getList();

记得处理异常和异步操作。

更多关于pocketbase在flutter中如何使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用PocketBase，主要通过其REST API进行数据操作。以下是基本使用方法：

1. 添加依赖

dependencies:
  http: ^1.1.0
  dio: ^5.0.0  # 或者使用dio替代http

2. 基础配置

import 'package:http/http.dart' as http;

class PocketBaseService {
  static const String baseUrl = 'http://127.0.0.1:8090'; // PocketBase服务器地址
  
  // 获取认证头信息
  static Map<String, String> getAuthHeaders(String token) {
    return {
      'Authorization': 'Bearer $token',
      'Content-Type': 'application/json',
    };
  }
}

3. 用户认证

// 用户登录
Future<Map<String, dynamic>> login(String email, String password) async {
  final response = await http.post(
    Uri.parse('${PocketBaseService.baseUrl}/api/collections/users/auth-with-password'),
    body: jsonEncode({
      'identity': email,
      'password': password,
    }),
    headers: {'Content-Type': 'application/json'},
  );
  
  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('登录失败');
  }
}

4. 数据操作

// 获取记录列表
Future<List<dynamic>> getRecords(String collectionName, {String? token}) async {
  final headers = token != null ? 
      PocketBaseService.getAuthHeaders(token) : 
      {'Content-Type': 'application/json'};
  
  final response = await http.get(
    Uri.parse('${PocketBaseService.baseUrl}/api/collections/$collectionName/records'),
    headers: headers,
  );
  
  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    return data['items'];
  } else {
    throw Exception('获取数据失败');
  }
}

// 创建记录
Future<dynamic> createRecord(String collectionName, Map<String, dynamic> data, String token) async {
  final response = await http.post(
    Uri.parse('${PocketBaseService.baseUrl}/api/collections/$collectionName/records'),
    body: jsonEncode(data),
    headers: PocketBaseService.getAuthHeaders(token),
  );
  
  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('创建记录失败');
  }
}

5. 实时订阅（可选）

PocketBase支持实时数据更新，可以使用WebSocket实现：

import 'package:web_socket_channel/web_socket_channel.dart';

class RealtimeService {
  WebSocketChannel? _channel;
  
  void subscribeToCollection(String collectionName) {
    _channel = WebSocketChannel.connect(
      Uri.parse('ws://127.0.0.1:8090/api/realtime'),
    );
    
    _channel!.sink.add(jsonEncode({
      'action': 'subscribe',
      'collection': collectionName,
    }));
    
    _channel!.stream.listen((message) {
      // 处理实时数据更新
      print('实时更新: $message');
    });
  }
  
  void dispose() {
    _channel?.sink.close();
  }
}

使用示例

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final PocketBaseService _pbService = PocketBaseService();
  String? _authToken;
  
  @override
  void initState() {
    super.initState();
    _login();
  }
  
  Future<void> _login() async {
    try {
      final result = await _pbService.login('user@example.com', 'password');
      setState(() {
        _authToken = result['token'];
      });
    } catch (e) {
      print('登录错误: $e');
    }
  }
  
  Future<void> _fetchData() async {
    if (_authToken != null) {
      final records = await _pbService.getRecords('posts', token: _authToken!);
      print(records);
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: _fetchData,
          child: Text('获取数据'),
        ),
      ),
    );
  }
}

主要步骤：

  1. 配置服务器地址
  2. 实现用户认证
  3. 使用HTTP请求操作数据
  4. （可选）配置实时订阅

确保PocketBase服务正在运行，并根据实际需求调整API端点。

回到顶部