Flutter集成NHost函数插件nhost_functions_dart的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter集成NHost函数插件nhost_functions_dart的使用

Nhost Functions Dart SDK 提供了对Nhost函数API的支持。

Nhost SDK

测试状态

入门指南

首先，你需要从Nhost仪表板获取你的子域名和区域。

import 'package:nhost_functions_dart/nhost_functions_dart.dart';

void main() async {
    // 初始化NhostFunctionsClient
    final functions = NhostFunctionsClient(url: 'Your Service URL');

    // 调用一个名为/hello的函数，并传递参数
    print('Running serverless function /hello');
    final helloResponse = await functions.callFunction(
      '/hello',
      query: {'name': 'Universe'},
    );

    // 打印函数返回的结果
    print('Response: ${helloResponse.body}');
}

最新版本

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

dependencies:
  nhost_functions_dart: ^1.0.0

示例代码

以下是一个完整的示例代码，展示了如何在Flutter项目中使用nhost_functions_dart插件来调用Nhost的函数服务。

main.dart

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Nhost Functions Example')),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

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

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

  Future<void> callNhostFunction() async {
    // 初始化NhostFunctionsClient
    final functions = NhostFunctionsClient(url: 'Your Service URL');

    try {
      // 调用一个名为/hello的函数，并传递参数
      print('Running serverless function /hello');
      final helloResponse = await functions.callFunction(
        '/hello',
        query: {'name': 'Universe'},
      );

      // 更新UI显示结果
      setState(() {
        responseMessage = 'Response: ${helloResponse.body}';
      });
    } catch (e) {
      // 捕获错误并显示
      setState(() {
        responseMessage = 'Error: $e';
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: callNhostFunction,
          child: Text('Call Nhost Function'),
        ),
        SizedBox(height: 20),
        Text(responseMessage),
      ],
    );
  }
}

更多关于Flutter集成NHost函数插件nhost_functions_dart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter集成NHost函数插件nhost_functions_dart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成并使用NHost的函数插件 nhost_functions_dart 的一个示例。这个示例将展示如何调用一个简单的服务器端函数。

步骤 1: 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 nhost_functions_dart 依赖：

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

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

步骤 2: 配置 NHost 客户端

在你的 Flutter 项目中，你需要配置 NHost 客户端。通常，你会在一个单独的文件中初始化这个客户端，例如 nhost_client.dart。

// nhost_client.dart
import 'package:nhost_functions_dart/nhost_functions_dart.dart';

class NHostClient {
  final NHostFunctions _functions;

  NHostClient({required String backendUrl})
      : _functions = NHostFunctions(backendUrl: backendUrl);

  // 获取实例的方法
  static final NHostClient instance = NHostClient(
    backendUrl: 'https://your-nhost-backend-url.com',  // 替换为你的NHost后端URL
  );

  // 调用函数的方法
  Future<dynamic> callFunction(String functionName, {Map<String, dynamic>? args}) async {
    return _functions.call(functionName, args: args);
  }
}

步骤 3: 使用 NHost 函数

现在你可以在你的 Flutter 应用中使用这个 NHost 客户端来调用后端函数。例如，在一个按钮点击事件中调用函数：

// main.dart
import 'package:flutter/material.dart';
import 'nhost_client.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('NHost Functions Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              try {
                var result = await NHostClient.instance.callFunction('helloWorld');
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Result: $result')),
                );
              } catch (e) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Error: ${e.message}')),
                );
              }
            },
            child: Text('Call Hello World Function'),
          ),
        ),
      ),
    );
  }
}

后端函数示例

假设你在 NHost 后端定义了一个名为 helloWorld 的函数，这个函数返回一个简单的字符串：

// 在你的NHost后端函数文件中，例如 functions/helloWorld.js
exports.helloWorld = async (req, res) => {
  res.status(200).json({ message: "Hello, World!" });
};

注意事项

  1. 后端URL: 确保 backendUrl 替换为你的实际 NHost 后端 URL。
  2. 函数名称: 确保你调用的函数名称与后端定义的名称一致。
  3. 错误处理: 在生产环境中，你应该添加更详细的错误处理逻辑。

通过上述步骤，你应该能够在 Flutter 应用中成功集成并使用 nhost_functions_dart 插件来调用 NHost 后端函数。

回到顶部