Flutter电子签名插件esign_plugin的使用

简介

Digio Esign flutter 插件允许你在Flutter应用中集成电子签名功能。

开始使用

Android

如何集成？

1. 在根build.gradle文件末尾添加仓库：

   allprojects {
     repositories {
        ...
        maven { url 'https://jitpack.io' }
     }
   }
   

2. 添加依赖项：

   implementation 'com.github.digio-tech:gateway:v4.0.14'
   implementation 'com.github.digio-tech:gateway_esign:v4.0.12'
   

3. 检查你的app的build.gradle文件（android/app/build.gradle），确认有类似以下的声明（根据你选择的构建配置而定）：

   android {
       compileSdkVersion 34
   
       defaultConfig {
           minSdkVersion 21
       }
   
       buildFeatures {
           viewBinding true
           dataBinding true
       }
       
       dependencies {
            implementation 'com.github.digio-tech:gateway:v4.0.14' 
            implementation 'com.github.digio-tech:gateway_esign:v4.0.12'
            implementation 'com.github.digio-tech:protean-esign:v3.2'
            
            implementation 'androidx.appcompat:appcompat:1.6.1'
            implementation 'com.google.android.material:material:1.9.0'
            implementation "androidx.navigation:navigation-fragment-ktx:2.5.3"
            implementation "androidx.navigation:navigation-ui-ktx:2.5.3"
             // Added in version 4.0.6
            implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'
             
             Following dependency is also not required if org.jetbrains.kotlin.android plugin version is 1.8.*
             implementation 'androidx.core:core-ktx:1.10.0'
             
             implementation 'com.android.volley:volley:1.2.1'
             implementation 'com.scottyab:rootbeer-lib:0.1.0'
       }
   }
   

4. ProGuard： 在测试发布版本之前，可能需要处理ProGuard异常。

   -dontwarn org.json.**
   -keep class org.json** { *; }
   

   注意：Kotlin插件应添加到项目级别的build.gradle文件中。

   参考Android指南以了解Android文件夹设置： Android Guide

iOS

如何集成？

1. Digio SDK支持Xcode 14.0及以上版本，Swift 5.7及以上版本。

   注意：Kotlin插件应添加到项目级别的build.gradle文件中。

2. 需要在iOS应用的Info.plist文件中添加LSApplicationQueriesSchemes：

   <key>LSApplicationQueriesSchemes</key>
   <array>
       <string>phonepe</string>
       <string>gpay</string>
       <string>paytmmp</string>
       <string>bhim</string>
       <string>upi</string>
       <string>ppe</string>
   </array>
   

开始使用Digio Esign

var digioConfig = DigioConfig();
digioConfig.theme.primaryColor = "#32a83a";
digioConfig.logo = "https://your_logo_url";
digioConfig.environment = Environment.SANDBOX;

final _esignPlugin = EsignPlugin(digioConfig);
_esignPlugin.setGatewayEventListener((GatewayEvent? gatewayEvent) {
    print("gateway : " + gatewayEvent.toString());
});
esignResult = await _esignPlugin.start("DID221221113330206ZX9AF6RYMF6OLE", "naman.jain@digio.in", "GWT***", null);
print('esignResult : ' + esignResult.toString());

完整示例代码

以下是完整的示例代码，展示了如何在Flutter应用中集成并使用esign_plugin插件。

main.dart

import 'dart:async';

import 'package:esign_plugin/digio_config.dart';
import 'package:esign_plugin/environment.dart';
import 'package:esign_plugin/esign_plugin.dart';
import 'package:esign_plugin/gateway_event.dart';
import 'package:esign_plugin/service_mode.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _response = '';

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化签名功能
  }

  void gatewayFunnelEventCallback(GatewayEvent? map){
    print("gateway funnel event" + map.toString());
  }

  // 平台消息是异步的，因此我们在这里初始化。
  Future<void> initSign() async {
    var esignResult;
    // 平台消息可能会失败，因此我们使用try/catch来处理PlatformException。
    // 我们还处理消息可能返回null的情况。
    try {
      var digioConfig = DigioConfig();
      digioConfig.theme.primaryColor = "#32a83a";
      digioConfig.logo = "https://www.gstatic.com/mobilesdk/160503_mobilesdk/logo/2x/firebase_28dp.png";
      digioConfig.environment = Environment.SANDBOX;
      digioConfig.serviceMode = ServiceMode.OTP;

      final _esignPlugin = EsignPlugin(digioConfig);
      _esignPlugin.setGatewayEventListener(gatewayFunnelEventCallback);
      esignResult = await _esignPlugin.start(
              "DID250117174131348NG49D51QXNV963", "akash.kumar@digio.in", "GWT2501171741317017Z4HNYSTEJ9U5S", null);
      print('esignResult : ' + esignResult.toString());
    } on PlatformException {
      esignResult = 'Failed to get platform version.';
    }

    // 如果在异步平台消息处理过程中，小部件被从树中移除，则丢弃回复，而不是调用setState来更新不存在的外观。
    if (!mounted) return;

    setState(() {
      _response = esignResult.toString();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  initSign();
                },
                child: Text('Press Me'),
              ),
              SizedBox(height: 20),
              Text('response : $_response\n'),
            ],
          ),
        ),
      ),
    );
  }
}