Flutter网页视图集成Iamport支付插件iamport_webview_flutter的使用

Flutter网页视图集成Iamport支付插件iamport_webview_flutter的使用

在Flutter应用中集成Iamport支付插件iamport_webview_flutter，可以方便地实现网页视图内的支付功能。本文将详细介绍如何配置和使用该插件。

安装依赖

首先，在项目的pubspec.yaml文件中添加iamport_webview_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  iamport_webview_flutter: ^版本号

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

配置Android平台视图

为了在Android平台上正确地嵌入WebView，需要启用Hybrid Composition。在initState()方法中设置：

import 'dart:io';

import 'package:iamport_webview_flutter/iamport_webview_flutter.dart';

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

class WebViewExampleState extends State<WebViewExample> {
  [@override](/user/override)
  void initState() {
    super.initState();
    if (Platform.isAndroid) {
      IamportWebView.platform = SurfaceAndroidWebView();
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Iamport WebView Example'),
      ),
      body: IamportWebView(
        initialUrl: 'https://example.com/payment',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (IamportWebViewController webViewController) {
          // WebView创建完成后的回调
        },
        onPageStarted: (String url) {
          print('Page started loading: $url');
        },
        onPageFinished: (String url) {
          print('Page finished loading: $url');
        },
      ),
    );
  }
}

确保在build.gradle文件中设置最低API级别为19：

android {
    defaultConfig {
        minSdkVersion 19
    }
}

使用示例

以下是一个完整的示例代码，展示了如何在Flutter应用中集成Iamport支付插件：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:iamport_webview_flutter/iamport_webview_flutter.dart';

void main() => runApp(MaterialApp(home: WebViewExample()));

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

class _WebViewExampleState extends State<WebViewExample> {
  final Completer<IamportWebViewController> _controller = Completer<IamportWebViewController>();

  [@override](/user/override)
  void initState() {
    super.initState();
    if (Platform.isAndroid) {
      IamportWebView.platform = SurfaceAndroidWebView();
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Iamport WebView Example'),
        actions: <Widget>[
          NavigationControls(_controller.future),
        ],
      ),
      body: Builder(builder: (BuildContext context) {
        return IamportWebView(
          initialUrl: 'https://example.com/payment',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (IamportWebViewController webViewController) {
            _controller.complete(webViewController);
          },
          onProgress: (int progress) {
            print("WebView is loading (progress : $progress%)");
          },
          onPageStarted: (String url) {
            print('Page started loading: $url');
          },
          onPageFinished: (String url) {
            print('Page finished loading: $url');
          },
          gestureNavigationEnabled: true,
        );
      }),
      floatingActionButton: favoriteButton(),
    );
  }

  Widget favoriteButton() {
    return FutureBuilder<IamportWebViewController>(
        future: _controller.future,
        builder: (BuildContext context, AsyncSnapshot<IamportWebViewController> controller) {
          if (controller.hasData) {
            return FloatingActionButton(
              onPressed: () async {
                final String url = (await controller.data!.currentUrl())!;
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Favorited $url')),
                );
              },
              child: const Icon(Icons.favorite),
            );
          }
          return Container();
        });
  }
}

class NavigationControls extends StatelessWidget {
  const NavigationControls(this._webViewControllerFuture)
      : assert(_webViewControllerFuture != null);

  final Future<IamportWebViewController> _webViewControllerFuture;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FutureBuilder<IamportWebViewController>(
      future: _webViewControllerFuture,
      builder: (BuildContext context, AsyncSnapshot<IamportWebViewController> snapshot) {
        final bool webViewReady = snapshot.connectionState == ConnectionState.done;
        final IamportWebViewController controller = snapshot.data!;
        return Row(
          children: <Widget>[
            IconButton(
              icon: const Icon(Icons.arrow_back_ios),
              onPressed: !webViewReady
                  ? null
                  : () async {
                      if (await controller.canGoBack()) {
                        await controller.goBack();
                      } else {
                        ScaffoldMessenger.of(context).showSnackBar(
                          const SnackBar(content: Text("No back history item")),
                        );
                        return;
                      }
                    },
            ),
            IconButton(
              icon: const Icon(Icons.arrow_forward_ios),
              onPressed: !webViewReady
                  ? null
                  : () async {
                      if (await controller.canGoForward()) {
                        await controller.goForward();
                      } else {
                        ScaffoldMessenger.of(context).showSnackBar(
                          const SnackBar(content: Text("No forward history item")),
                        );
                        return;
                      }
                    },
            ),
            IconButton(
              icon: const Icon(Icons.replay),
              onPressed: !webViewReady
                  ? null
                  : () {
                      controller.reload();
                    },
            ),
          ],
        );
      },
    );
  }
}