Flutter功能扩展插件 functions_client 的使用

简介

functions_client 是一个用于在 Flutter 应用中调用 Supabase Edge Functions 的客户端库。Supabase Edge Functions 是基于 Vercel 的 Serverless 函数，可以让你在无服务器环境中运行自定义逻辑。

文档

官方文档可以在 Supabase 官方网站上找到：

• Dart 参考
• Edge Functions 指南

许可证

本仓库使用 MIT 许可证。

致谢

• https://github.com/supabase/functions-js - 从 supabase/functions-js 叉口移植

安装

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

dependencies:
  flutter:
    sdk: flutter
  functions_client: ^0.3.0

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

使用示例

1. 初始化 SupabaseClient

首先，你需要初始化 SupabaseClient，并配置你的 Supabase 项目 URL 和匿名访问密钥。

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

void main() {
  final supabaseUrl = 'https://your-project-url.supabase.co';
  final supabaseKey = 'your-anonymous-access-key';
  final client = SupabaseClient(supabaseUrl, supabaseKey);

  runApp(MyApp(client: client));
}

class MyApp extends StatelessWidget {
  final SupabaseClient client;

  MyApp({required this.client});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page', client: client),
    );
  }
}

2. 调用 Edge Function

假设你有一个名为 hello 的 Edge Function，它接受一个 name 参数并返回一个欢迎消息。

class MyHomePage extends StatefulWidget {
  final String title;
  final SupabaseClient client;

  MyHomePage({required this.title, required this.client});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _message = '';

  Future<void> _callHelloFunction() async {
    try {
      final response = await widget.client.functions.invoke('hello', data: {'name': 'World'});
      setState(() {
        _message = response.data['message'];
      });
    } catch (e) {
      setState(() {
        _message = 'Error: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Message:',
            ),
            Text(
              '$_message',
              style: Theme.of(context).textTheme.headline4,
            ),
            ElevatedButton(
              onPressed: _callHelloFunction,
              child: Text('Call hello function'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 运行应用

运行你的 Flutter 应用，点击按钮调用 hello 函数，你应该会看到返回的欢迎消息。

总结

通过 functions_client 插件，你可以在 Flutter 应用中轻松调用 Supabase Edge Functions。希望这个示例对你有所帮助！如果你有任何问题或需要进一步的帮助，请参阅官方文档或在 GitHub 上提交 issue。