Flutter Stripe CardField Web端无法显示，报Source maps加载错误

问题描述 #

使用flutter_stripe的CardField组件在iOS和Android端可正常展示卡片输入框，但在Chrome浏览器中运行时仅显示空白区域，控制台报错：Bad state: Source maps are not done loading。已安装flutter_stripe和flutter_stripe_web包，问题仍未解决。

复现代码 #

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

void main() {
   runApp(const MyApp());
}

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

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

class MyAppState extends State<MyApp> {
     CardFieldInputDetails? _card;
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Test',
         home: Scaffold(
           body: Column(
             children: [
               CardField(
                 cursorColor: Colors.black,
                 enablePostalCode: true,
                 countryCode: 'US',
                 postalCodeHintText: 'Enter the us postal code',
                 onCardChanged: (card) {
                   setState(() {
                     _card = card;
                   });
                 },
               ),
             ],
           ),
         ),
       );
     }
   }

显示效果 #

• iOS端正常显示：
  
• Web端空白显示：
  

解决方案 #

1. 补充Stripe JS脚本加载 #

Web端flutter_stripe依赖Stripe官方JS脚本，需在web/index.html的<head>标签内添加：

<script src="https://js.stripe.com/v3/"></script>

若已添加，可尝试更换为指定版本脚本（如https://js.stripe.com/v3/2024-06-20/），排查网络加载问题。

2. 完善Stripe初始化逻辑 #

在main函数中添加Stripe密钥初始化，并针对Web端执行额外配置：

import 'package:flutter/foundation.dart';

void main() {
  Stripe.publishableKey = '你的Stripe Publishable Key';
  if (kIsWeb) {
    Stripe.instance.applySettings();
  }
  runApp(const MyApp());
}

3. 清除缓存并重建项目 #

• 清除Chrome浏览器缓存（快捷键Ctrl+Shift+Delete），或使用无痕模式测试
• 执行flutter clean清理项目缓存，再重新运行flutter run -d chrome

4. 确保包版本兼容性 #

在pubspec.yaml中指定flutter_stripe和flutter_stripe_web的相同版本，避免版本冲突：

dependencies:
  flutter_stripe: ^9.6.0
  flutter_stripe_web: ^9.6.0

执行flutter pub get更新依赖。

5. 临时禁用Source Map #

若报错确由Source Map加载导致，可运行Web时禁用Source Map生成：

flutter run -d chrome --no-source-maps

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