如何在Flutter中修改文本的混合模式（Blend Mode）？

我当前使用如下Flutter代码实现文本展示：

Expanded(
  flex: 1,
  child: Padding(
    padding: const EdgeInsets.only(top: 80, right: 230),
    child: Text(
      'Gifts \n& Wishes',
      style: TextStyle(
        fontFamily: 'GreatVibes',
        fontSize: 42,
      ),
    ),
  ),
),

当前效果：文本为常规纯色显示（无混合效果）
目标效果：文本呈现出与背景融合的镂空/反色类混合效果

请问如何在Flutter中修改该文本的混合模式（Blend Mode）？

实现方案 #

Flutter原生Text组件不支持直接设置混合模式，需要借助ShaderMask或Stack结合BlendMode来实现，以下是两种实用方案：

方案一：用ShaderMask快速实现文本混合

ShaderMask可以给子组件应用着色器并指定混合模式，适合实现文本与背景的融合效果，示例代码：

Expanded(
  flex: 1,
  child: Padding(
    padding: const EdgeInsets.only(top: 80, right: 230),
    child: ShaderMask(
      // 选择对应混合模式，srcIn可实现文本"镂空"显示背景的效果，匹配你的目标需求
      blendMode: BlendMode.srcIn,
      // 这里的着色器可根据实际背景调整，比如用背景色、渐变或纹理
      shaderCallback: (bounds) => LinearGradient(
        colors: [Colors.white], // 颜色需匹配你的背景风格
      ).createShader(bounds),
      child: Text(
        'Gifts \n& Wishes',
        style: TextStyle(
          fontFamily: 'GreatVibes',
          fontSize: 42,
          color: Colors.black, // 文本颜色不影响最终混合效果，可设任意色
        ),
      ),
    ),
  ),
),

方案二：用Stack+ColorFiltered实现复杂混合

如果需要和自定义背景层叠加混合，可通过Stack分层，再用ColorFiltered添加混合模式：

Expanded(
  flex: 1,
  child: Padding(
    padding: const EdgeInsets.only(top: 80, right: 230),
    child: Stack(
      children: [
        // 替换成你实际的背景组件（比如图片、渐变容器）
        Container(color: Colors.grey),
        // 文本层
        Positioned.fill(
          child: Text(
            'Gifts \n& Wishes',
            style: TextStyle(
              fontFamily: 'GreatVibes',
              fontSize: 42,
              color: Colors.white,
            ),
          ),
        ),
        // 混合效果层
        Positioned.fill(
          child: ColorFiltered(
            colorFilter: ColorFilter.mode(
              Colors.black,
              BlendMode.dstOut, // dstOut可实现文本区域镂空显示下层背景的效果
            ),
            child: Container(color: Colors.white),
          ),
        ),
      ],
    ),
  ),
),

提示：不同BlendMode会产生不同视觉效果，比如multiply、screen等，可根据目标效果测试调整最适配的模式。

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