如何将HTML表单数据传递至Flutter App（Android/iOS）？

方案1：URL Scheme跳转传参 #

这是从HTML页面直接唤醒Flutter应用并传递数据的最直接方式，适合登录这类轻量数据传递场景。

• HTML端：在表单提交事件里构造带参数的URL Scheme链接，用encodeURIComponent处理特殊字符避免解析错误：

  <form id="loginForm">
    <input type="text" name="username" id="username">
    <input type="password" name="password" id="password">
    <button type="submit">提交</button>
  </form>
  <script>
    document.getElementById('loginForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      // 假设你的Flutter应用URL Scheme为myflutterapp
      const targetUrl = `myflutterapp://login?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`;
      window.location.href = targetUrl;
    });
  </script>
  

• Flutter端：用uni_links包监听URL Scheme，解析携带的参数：

  import 'package:uni_links/uni_links.dart';
  import 'dart:async';
  import 'package:flutter/material.dart';
  
  class LoginDataPage extends StatefulWidget {
    @override
    _LoginDataPageState createState() => _LoginDataPageState();
  }
  
  class _LoginDataPageState extends State<LoginDataPage> {
    StreamSubscription? _linkSubscription;
    String? username;
    String? password;
  
    @override
    void initState() {
      super.initState();
      _listenToUrlLinks();
    }
  
    void _listenToUrlLinks() async {
      _linkSubscription = uriLinkStream.listen((Uri? uri) {
        if (uri != null && uri.path == '/login') {
          setState(() {
            username = uri.queryParameters['username'];
            password = uri.queryParameters['password'];
          });
        }
      }, onError: (err) {
        // 处理链接解析错误
      });
    }
  
    @override
    void dispose() {
      _linkSubscription?.cancel();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('获取到的用户名: ${username ?? '无'}'),
              Text('获取到的密码: ${password ?? '无'}'),
            ],
          ),
        ),
      );
    }
  }
  

• 注意：需要在Android的AndroidManifest.xml和iOS的Info.plist中配置对应的URL Scheme，确保应用能被唤醒并接收参数。

方案2：WebView JS桥接传参 #

如果HTML表单是嵌入在Flutter的WebView中，可以通过JS通道直接把数据传给Flutter：

• Flutter端：用webview_flutter包配置JS通道，接收HTML传来的数据：

  import 'package:webview_flutter/webview_flutter.dart';
  import 'package:flutter/material.dart';
  import 'dart:convert';
  import 'package:shared_preferences/shared_preferences.dart';
  
  class FormWebViewPage extends StatefulWidget {
    @override
    _FormWebViewPageState createState() => _FormWebViewPageState();
  }
  
  class _FormWebViewPageState extends State<FormWebViewPage> {
    late WebViewController _webController;
  
    @override
    Widget build(BuildContext context) {
      return WebView(
        initialUrl: 'assets/html/login_form.html', // 本地HTML文件路径
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (controller) {
          _webController = controller;
          // 注册JS通道
          _webController.addJavaScriptChannel(
            'FormDataChannel',
            onMessageReceived: (JavaScriptMessage message) async {
              final formData = jsonDecode(message.message);
              // 可以把数据存在本地，或者直接跳转到展示页面
              final prefs = await SharedPreferences.getInstance();
              await prefs.setString('username', formData['username']);
              await prefs.setString('password', formData['password']);
              Navigator.pushNamed(context, '/display_data');
            },
          );
        },
      );
    }
  }
  

• HTML端：通过注册的JS通道发送表单数据：

  <form id="loginForm">
    <input type="text" name="username" id="username">
    <input type="password" name="password" id="password">
    <button type="submit">提交</button>
  </form>
  <script>
    document.getElementById('loginForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      // 通过JS通道把数据传给Flutter
      FormDataChannel.postMessage(JSON.stringify({
        username: username,
        password: password
      }));
    });
  </script>
  

方案3：后端中转传参 #

如果HTML表单是独立的PWA，和Flutter原生应用是两个独立客户端，适合用后端做数据中转：

• HTML端：表单提交数据到后端接口，后端存储数据后返回一个用户标识（比如登录token）。
• Flutter端：用户打开应用后，用同一用户标识请求后端接口，拉取之前提交的表单数据。
• 这种方式适合跨设备同步数据，安全性更高，还能做数据校验和持久化。

内容的提问来源于stack exchange，提问作者Febin Johnson