时间戳

首页 > 解决方案 > Flutter Plaid 包在 iOS 上显示黑屏

android - Flutter Plaid 包在 iOS 上显示黑屏

问题描述

再会，

我有一个颤振应用程序，它集成了一个格子颤振包，它在 android 上运行良好，但在 iOS 上显示白屏。

我已经添加了

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSAllowsArbitraryLoadsInWebContent</key>
        <true/>
    </dict>

在 Info.plist 文件中，但这似乎无法正常工作。

下面是截图

安卓模拟器

iOS 模拟器

请我需要有关如何使 iOS 平台正常工作的帮助。

这是我的配置

Configuration configuration = Configuration(
    plaidPublicKey: '$PLAID_PUBLIC_KEY',
    plaidBaseUrl: 'https://cdn.plaid.com/link/v2/stable/link.html',
    plaidEnvironment: '$PLAID_ENV',
    environmentPlaidPathAccessToken:
        'https://sandbox.plaid.com/item/public_token/exchange',
    environmentPlaidPathStripeToken:
        'https://sandbox.plaid.com/processor/stripe/bank_account_token/create',
    // plaidClientId: 'yourPlaidClientId',
    // secret: plaidSandbox ? 'yourSecret' : '',
    clientName: '$PLAID_CLIENT_NAME',
    // webhook: 'Webhook Url',
    products: 'auth, transactions',
    selectAccount: 'true',
    plaidClientId: null);


FlutterPlaidApi flutterPlaidApi = FlutterPlaidApi(configuration);

WidgetsBinding.instance.addPostFrameCallback((_) {
  // Add Your Code here.
});
flutterPlaidApi.launch(context, (Result result) async {
  // show loader screen when returning back to the app
  showLoadingScreen(context, message: 'Processing...');
  // send the data to the api
  var response = await BankService().linkUserAccountWithSila(
      accountName: result.accountName,
      publicToken: result.token,
      email: 'email@example.com');

  final responseJson = json.decode(response.body);
  if (response.statusCode >= 200 && response.statusCode <= 299) {
    var token = await getToken();
    var client = new http.Client();

    List<String> urls = [
      'getDefaultAccount',
      'all',
    ];

    try {
      List<http.Response> list =
          await Future.wait(urls.map((urlId) => client.get(
                '$kBaseUrl/account/$urlId',
                headers: {HttpHeaders.authorizationHeader: "Bearer $token"},
              )));

      if (list[0].statusCode == 200 && list[1].statusCode == 200) {
        var defaultAccount = jsonDecode(list[0].body);
        var plaidAccounts = jsonDecode(list[1].body);

        Provider.of<TransferProvider>(context, listen: false)
            .updatePlaidBankAccounts(
          plaidAccount:
              plaidAccounts['data'] != null ? plaidAccounts['data'] : [],
          account: defaultAccount['data'],
        );
      }
    } catch (e) {} finally {
      client.close();
    }

    Navigator.pop(context);

    Toast.show('Account linked successfully', context,
        duration: Toast.LENGTH_LONG, gravity: Toast.CENTER);
  } else {
    Toast.show('Something went wrong, please try again later', context,
        duration: Toast.LENGTH_LONG, gravity: Toast.CENTER);
    // error
  }
}, stripeToken: false);

}

标签： androidiosflutterdartplaid

解决方案

试试这个代码：https ://github.com/flutter/flutter/issues/49483 免责声明：这不是我的代码。我在这里复制它，以便如果原始帖子被删除，源代码仍然在这里可用。所有学分归原作者所有。

重现步骤

  1. 在 Plaid 注册一个免费的沙盒测试帐户（在沙盒中运行 webview 需要一个 public_key）
  2. 创建新项目并添加plaid_screen.dart到 lib
  3. 在plaid_screen.dart将 Plaid 中的公钥分配到 queryParameters “key”键中
  4. 用下面的设置替换默认main.dart内容
  5. 添加webview_flutter: ^0.3.19+5到 pubspec.yaml
  6. 添加<key>io.flutter.embedded_views_preview</key><true/>到 ios/Runner/info.plist
  7. 运行 main.dart

主要飞镖：

import 'package:bug/plaid_screen.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: PlaidScreen.id,
      routes: {
        PlaidScreen.id: (context) => PlaidScreen(),
      },
    );
  }
}

plaid_screen.dart：（注意：必须获取公钥并粘贴在下方）

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

String authority = 'cdn.plaid.com';
String unencodedPath = '/link/v2/stable/link.html';
Map<String, String> queryParameters = {
  "key": "{{PASTE_PUBLIC_KEY}}",
  "product": "auth",
  "apiVersion": "v2", // set this to "v1" if using the legacy Plaid API
  "env": "sandbox",
  "clientName": "Test App",
  "selectAccount": "true",
};

// documentation:  https://plaid.com/docs/#webview-integration
class PlaidScreen extends StatefulWidget {
  static const id = 'plaid_screen_id';

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

class _PlaidScreenState extends State<PlaidScreen> {
  Uri uri = Uri.https(authority, unencodedPath, queryParameters);

  Completer<WebViewController> _controller = Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: WebView(
          javascriptMode: JavascriptMode.unrestricted,
          initialUrl: uri.toString(),
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
          navigationDelegate: (NavigationRequest navRequest) {
            debugPrint("NavigationRequest URL: ${navRequest.url}");
            if (navRequest.url.contains('plaidlink://')) {
              return NavigationDecision.prevent;
            }
            debugPrint(navRequest.url.toString());
            return NavigationDecision.navigate;
          },
        ),
      ),
    );
  }
}

推荐阅读