Flutter WebView集成Plaid Link时Enter/Return键无响应问题

我正在开发Flutter项目，使用Plaid Link WebView，已安装最新版webview_flutter包。WebView内的金融机构搜索输入框可正常识别键盘输入，但无论使用物理键盘、iOS模拟器虚拟键盘还是真机键盘，按下Enter/Return键均无响应——只有按下该键才会触发搜索结果更新，但当前完全没反应。

在浏览器中打开同一WebView链接时，按下Enter键可正常触发搜索更新。

现有WebView代码 #

import 'package:ditch/settings.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class PlaidWebView extends StatefulWidget {
  final String linkToken;
  const PlaidWebView({
    super.key,
    required this.linkToken,
  });

  @override
  State<PlaidWebView> createState() => _PlaidWebViewState();
}

class _PlaidWebViewState extends State<PlaidWebView> {
  bool isAuthenticated = false;
  late String publicToken;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        margin: const EdgeInsets.fromLTRB(15, 50, 15, 50),
        child: WebView(
          initialUrl:
              'https://cdn.plaid.com/link/v2/stable/link.html?isWebview=true&token=${widget.linkToken}',
          javascriptMode: JavascriptMode.unrestricted,
          navigationDelegate: (request) {
            if (request.url.contains('plaidlink://connected')) {
              isAuthenticated = true;
              return NavigationDecision.navigate;
            } else if (request.url.contains('plaidlink://exit')) {
              Navigator.pushReplacement(
                context,
                MaterialPageRoute(builder: (context) => const Settings()),
              );
              return NavigationDecision.prevent;
            } else {
              print(request);
              return NavigationDecision.navigate;
            }
          },
        ),
      ),
    );
  }
}

相关日志 #

• 输入搜索内容时的重定向日志：

flutter: NavigationRequest(url: plaidlink://event?error_code=&error_message=&error_type=&event_name=SEARCH_INSTITUTION&exit_status=&institution_id=&institution_name=&institution_search_query=first%20platypus%20bank&...)

• 真机运行时的无关日志：

2022-11-28 07:49:42.430862-0500 Runner[7222:1919659] Could not signal service com.apple.WebKit.WebContent: 113: Could not find specified service

解决思路与方案 #

1. 注入JavaScript监听Enter键并触发搜索

webview_flutter在移动端可能未正确传递Enter键事件到网页，可通过注入自定义JS手动监听并触发搜索动作：

修改代码，添加WebViewController实例并在页面加载完成后注入JS：

class _PlaidWebViewState extends State<PlaidWebView> {
  bool isAuthenticated = false;
  late String publicToken;
  late WebViewController _webViewController; // 添加控制器

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        margin: const EdgeInsets.fromLTRB(15, 50, 15, 50),
        child: WebView(
          initialUrl:
              'https://cdn.plaid.com/link/v2/stable/link.html?isWebview=true&token=${widget.linkToken}',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (controller) {
            _webViewController = controller; // 初始化控制器
          },
          onPageFinished: (url) {
            // 页面加载完成后注入JS
            _webViewController.runJavascript('''
              // 找到搜索输入框（根据实际DOM结构调整选择器）
              const searchInput = document.querySelector('input[aria-label="Search institutions"]');
              if (searchInput) {
                searchInput.addEventListener('keydown', function(e) {
                  if (e.key === 'Enter' || e.keyCode === 13) {
                    e.preventDefault();
                    // 触发搜索：优先模拟点击搜索按钮，或调用Plaid内部方法
                    const searchTrigger = document.querySelector('button[type="submit"]') || document.querySelector('[data-test="search-button"]');
                    if (searchTrigger) searchTrigger.click();
                    // 如果上述选择器无效，可尝试调用Plaid的搜索API（需参考Plaid Link文档）
                    // window.plaidLink && window.plaidLink.searchInstitutions(searchInput.value);
                  }
                });
              }
            ''');
          },
          navigationDelegate: (request) {
            // 原有导航逻辑不变
            if (request.url.contains('plaidlink://connected')) {
              isAuthenticated = true;
              return NavigationDecision.navigate;
            } else if (request.url.contains('plaidlink://exit')) {
              Navigator.pushReplacement(
                context,
                MaterialPageRoute(builder: (context) => const Settings()),
              );
              return NavigationDecision.prevent;
            } else {
              print(request);
              return NavigationDecision.navigate;
            }
          },
        ),
      ),
    );
  }
}

2. 确认Plaid Link WebView配置

检查initialUrl中的isWebview=true参数是否正确，Plaid针对WebView环境有特殊适配，若参数缺失可能导致交互异常。

3. 验证webview_flutter版本

确保使用的是最新稳定版webview_flutter，部分旧版本存在移动端键盘事件传递的bug，可执行flutter pub upgrade webview_flutter更新。

4. 检查iOS WebView偏好设置

若问题仅出现在iOS，可尝试配置WebView的iOS特定参数，比如启用键盘辅助栏：

WebView(
  // 其他配置...
  creationParams: const WebViewCreationParams(
    iosSettings: IOSWebViewSettings(
      keyboardAccessoryBarEnabled: true,
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Luis Andino