如何在Flutter应用中展示后端返回的嵌入API地图？

Flutter本身没有原生支持iframe的组件，要展示这类网页嵌入内容，最直接的方式是使用webview插件，下面是具体实现步骤：

1. 添加依赖 #

在项目的pubspec.yaml文件中添加webview_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0 # 请使用最新版本

执行flutter pub get安装依赖。

2. 处理后端返回的iframe字符串 #

你从后端拿到的字符串包含HTML转义字符（比如<、"），需要先转换成正常的HTML代码：

// 后端返回的原始字符串
String rawIframe = "<iframe src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.681138843672!2d-73.89482218459395!3d40.747041279328165!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25f01328248b3%3A0x62300784dd275f96!2s7232%20Broadway%20%23%20308%2C%20Flushing%2C%20NY%2011372%2C%20USA!5e0!3m2!1sen!2sbd!4v1652467683397!5m2!1sen!2sbd\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"></iframe>";

// 转义字符解码
String decodedIframe = Uri.decodeFull(rawIframe)
    .replaceAll('&lt;', '<')
    .replaceAll('&gt;', '>')
    .replaceAll('&quot;', '"');

3. 用WebView加载处理后的iframe #

创建一个包含WebView的Widget，把iframe包裹在基础HTML结构中加载（确保样式适配Flutter容器）：

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

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

  @override
  State<MapWebView> createState() => _MapWebViewState();
}

class _MapWebViewState extends State<MapWebView> {
  late final WebViewController controller;
  final String rawIframe = "&lt;iframe src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.681138843672!2d-73.89482218459395!3d40.747041279328165!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25f01328248b3%3A0x62300784dd275f96!2s7232%20Broadway%20%23%20308%2C%20Flushing%2C%20NY%2011372%2C%20USA!5e0!3m2!1sen!2sbd!4v1652467683397!5m2!1sen!2sbd\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"&gt;&lt;/iframe&gt;";

  @override
  void initState() {
    super.initState();
    // 处理iframe字符串
    String decodedIframe = Uri.decodeFull(rawIframe)
        .replaceAll('&lt;', '<')
        .replaceAll('&gt;', '>')
        .replaceAll('&quot;', '"');
    // 构建基础HTML页面，让iframe占满容器
    String htmlContent = '''
    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
          body { margin: 0; padding: 0; }
          iframe { width: 100%; height: 100vh; border: none; }
        </style>
      </head>
      <body>
        $decodedIframe
      </body>
    </html>
    ''';
    // 初始化WebViewController
    controller = WebViewController()
      ..loadHtmlString(htmlContent);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('地图')),
      body: WebViewWidget(controller: controller),
    );
  }
}

4. 平台配置 #

• Android：在android/app/src/main/AndroidManifest.xml中添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS：在ios/Runner/Info.plist中添加允许HTTP/HTTPS请求的配置（如果加载的是HTTPS地址，默认已允许，若有HTTP需求需添加）：

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

这样就能在Flutter应用中正常展示Google Maps的嵌入iframe了。

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