Flutter从上到下居中渐变文本颜色显示异常求助

问题描述 #

我希望实现文本从上到下居中的渐变效果，使用了如下代码，但修改LinearGradient的begin和end属性时，颜色显示不符合预期。下图是我想要实现的Figma设计效果：

代码示例 #

Scaffold(
        body: ShaderMask(
          blendMode: BlendMode.srcIn,
          shaderCallback: (rect)=>const LinearGradient(
            colors: [Color(0xff9747FF)

              , Color(0xff3B136F)],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          )
              .createShader(rect),
          child: Center(
            child: Text('Rahove',style: _textTheme.displayMedium,),
          ),
        ),
      ),

请帮忙排查问题原因。

问题原因及解决方案 #

问题出在shaderCallback传递的rect是整个ShaderMask组件的尺寸，而非文本本身的尺寸。当你设置Alignment.topCenter到bottomCenter时，渐变是基于父组件（甚至整个屏幕）的范围生成的，文本仅截取了渐变的极小一段，自然和预期效果不符。

方法1：直接给TextStyle绑定渐变（推荐） #

无需借助ShaderMask，直接通过TextStyle的foreground属性为文本设置渐变：

Center(
  child: LayoutBuilder(
    builder: (context, constraints) {
      // 先计算文本实际尺寸
      final textPainter = TextPainter(
        text: TextSpan(text: 'Rahove', style: _textTheme.displayMedium),
        textDirection: TextDirection.ltr,
      )..layout(maxWidth: constraints.maxWidth);
      
      return Text(
        'Rahove',
        style: _textTheme.displayMedium?.copyWith(
          foreground: Paint()
            ..shader = LinearGradient(
              colors: const [Color(0xff9747FF), Color(0xff3B136F)],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ).createShader(
              Rect.fromLTWH(0, 0, textPainter.width, textPainter.height),
            ),
        ),
      );
    },
  ),
)

方法2：限制ShaderMask尺寸匹配文本 #

用IntrinsicWidth和IntrinsicHeight让ShaderMask的大小适配文本，确保渐变范围和文本一致：

Scaffold(
  body: Center(
    child: IntrinsicWidth(
      child: IntrinsicHeight(
        child: ShaderMask(
          blendMode: BlendMode.srcIn,
          shaderCallback: (rect) => const LinearGradient(
            colors: [Color(0xff9747FF), Color(0xff3B136F)],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ).createShader(rect),
          child: Text('Rahove', style: _textTheme.displayMedium),
        ),
      ),
    ),
  ),
)

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