Flutter自定义组件插件okra_widget_official的使用

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

Flutter 自定义组件插件 okra_widget_official 的使用

Okra Widget Flutter SDK

Okra Widget Demo

Flutter SDK 用于实现 Okra 小部件。Okra 是一个安全且易于使用的 Web 模块，此库提供了前端 Web SDK（也可在 iOS、Android 和 JavaScript 中使用）用于 账户认证 和 支付发起，支持 Okra 所支持的所有银行。

尝试演示

查看 小部件流程 以了解 Okra 小部件的工作方式。

开始之前

  • 查看我们的 入门指南 创建您的开发者帐户并检索您的客户端令牌、API 密钥和私钥。
  • 创建一个 沙盒客户，以便您可以立即连接。

额外加分

  • 设置 Slack 通知，以便您可以实时查看您的 API 调用状态并重新运行调用！

入门

此库将帮助您在混合 Android/iOS 应用程序中快速添加 Okra 小部件。您需要做的只是…

安装

要使用此插件，在 pubspec.yaml 文件中添加 okra_widget 作为依赖项：

dependencies:
  okra_widget: ^3.1.14

在 iOS 上，启用嵌入式视图预览，并通过添加以下配置到应用的 Info.plist 文件来允许任意加载：

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
</dict>

使用

构建带选项的小部件
void buildWithOptions() {
  var banks = [
    "first-bank-of-nigeria",
    "guaranty-trust-bank",
    "access-bank",
  ];

  Okra.buildWithOptions(context,
      key: "", // 请替换为实际的 app_id
      token: "", // 请替换为实际的 token
      color: "#3AB795",
      products: ['auth', 'identity', 'balance', 'transactions'],
      chargeAmount: 50000,
      chargeNote: "testing payment",
      chargeType: "one-time",
      chargeCurrency: "NGN",
      environment: "production",
      clientName: "Okra",
      logo: "https://dash.okra.ng/static/media/okra-logo.514fd943.png",
      limit: 3,
      meta: "Test Meta",
      options: {
        "name": "Flutter Options Test"
      },
      currency: "NGN",
      isCorporate: false,
      showBalance: true,
      geoLocation: true,
      payment: false,
      connectMessage: "Which account do you want to connect with?",
      callbackUrl: "",
      redirectUrl: "",
      widgetSuccess: "Your account was successfully linked to SwipeNG",
      widgetFailed: "An unknown error occurred, please try again.",
      guarantors: {
        "status": false,
        "message": "Okra requires you to add guarantors",
        "number": 3,
      },
      filters: {"industry_type": "all", "banks": banks},
      onSuccess: (data) {
        print("Success");
        developer.log('$data');
      }, 
      onError: (message) {
        print("error");
        developer.log('$message');
      }, 
      onClose: (message) {
        print("close");
        print(message);
      },
      onEvent: (message) {
        print("event");
        print(message);
      }
  );
}
构建带短 URL 的小部件
void buildWithShortUrl() {
  Okra.buildWithShortUrl(
      context,
      shortUrl: dotenv.env['url']!, // 请替换为实际的短 URL
      onSuccess: (data) {
        print("Success");
        developer.log('$data');
      },
      onError: (message) {
        print("error");
        print(message);
      },
      onClose: (message) {
        print("close");
        print(message);
      },
      onEvent: (message) {
        print("event");
        print(message);
      }
  );
}

更多关于Flutter自定义组件插件okra_widget_official的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter自定义组件插件okra_widget_official的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中自定义组件插件okra_widget_official的使用示例。假设okra_widget_official是一个你已经添加到pubspec.yaml文件中的Flutter插件，并且你已经运行了flutter pub get来安装它。

首先，确保你的pubspec.yaml文件中包含以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  okra_widget_official: ^latest_version  # 替换为实际最新版本号

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

接下来，在你的Flutter项目中创建一个自定义组件来使用okra_widget_official插件。以下是一个示例，假设okra_widget_official提供了一个名为OkraButton的按钮组件：

1. 导入插件

在你的Dart文件中导入插件：

import 'package:okra_widget_official/okra_widget_official.dart';

2. 使用自定义组件

创建一个简单的Flutter应用，并在其中使用OkraButton组件。例如，在main.dart中：

import 'package:flutter/material.dart';
import 'package:okra_widget_official/okra_widget_official.dart'; // 导入插件

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Okra Widget Demo'),
      ),
      body: Center(
        child: OkraButton(
          // 假设OkraButton有以下属性
          label: 'Click Me',
          onPressed: () {
            // 按钮点击事件处理
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Button Clicked!')),
            );
          },
          // 假设还有其他自定义属性，如颜色、大小等
          color: Colors.blue,
          textStyle: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

3. 运行应用

确保你的开发环境已经设置好，然后运行应用：

flutter run

注意事项

  • 属性调整：上述代码中的OkraButton属性（如label, onPressed, color, textStyle）是基于假设的。你需要参考okra_widget_official的官方文档来获取实际的属性和使用方法。
  • 错误处理：在实际开发中，处理可能的错误和异常情况是很重要的，确保你的应用能够稳健运行。
  • 样式定制：根据需要，你可以进一步定制组件的样式，以满足应用的设计需求。

由于okra_widget_official是一个假设的插件名，具体的组件和使用方法需要参考该插件的实际文档。如果okra_widget_official提供了示例代码或文档，请务必参考那些资源以获取最准确的信息。

回到顶部