Flutter使用CardFormField时如何移除CVC字段多余的Discover品牌logo

问题对应环境 #

• 依赖版本：flutter_stripe: ^3.1.0
• 现象：CVC输入字段下方显示多余的Discover等卡组织品牌logo，现有CardFormStyle配置无对应隐藏参数

方案1：升级依赖后配置隐藏（稳定性优先，推荐） #

• 将pubspec.yaml中的flutter_stripe依赖升级至^4.0.0及以上正式版本，执行flutter pub get同步依赖
• 在CardFormField组件中新增displayCardBrand配置项，赋值为false即可完全关闭CVC区域的卡品牌logo渲染，可直接复用原有样式配置，代码参考：

CardFormField(
  enablePostalCode: true,
  autofocus: true,
  // 新增配置关闭卡品牌标识显示
  displayCardBrand: false,
  style: CardFormStyle(
    textColor: Colors.black,
    fontSize: 20,
    backgroundColor: Colors.white,
    borderColor: Colors.black,
    cursorColor: Colors.black,
    placeholderColor: Colors.grey,
    textErrorColor: Colors.red,
  ),
)

方案2：保留3.1.0版本的兼容处理 #

如果暂时无法升级依赖版本，可通过覆盖表单主题参数的方式强制隐藏品牌logo：
在CardFormField外层嵌套Theme组件，通过CardFormTheme扩展将卡品牌logo尺寸设为0，实现视觉上的完全隐藏，代码参考：

Theme(
  data: Theme.of(context).copyWith(
    extensions: <ThemeExtension<dynamic>>[
      CardFormTheme(
        cardBrandLogoSize: 0,
      ),
    ],
  ),
  child: CardFormField(
    enablePostalCode: true,
    autofocus: true,
    style: CardFormStyle(
      textColor: Colors.black,
      fontSize: 20,
      backgroundColor: Colors.white,
      borderColor: Colors.black,
      cursorColor: Colors.black,
      placeholderColor: Colors.grey,
      textErrorColor: Colors.red,
    ),
  ),
)

注意：3.1.0版本中CardFormTheme属于内部实现参数，后续大版本升级可能存在参数变动，升级依赖后建议切换为方案1的官方配置方式。

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