flutter 从顶部中心到底部中心的线性渐变文本

Question

我想显示从顶部中心到底部中心的文本渐变，我使用下面的代码，但我不知道为什么 colors 在我更改线性渐变开始和结束属性时显示其他类型的颜色。 下图是我要显示的output。

.

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,),
          ),
        ),
      ),

Answer 1

使用Rect.fromLTWH指定阴影的高度和宽度

Rect.fromLTWH(0, 0, size.width, size.height + 24),

注意：额外的24高度是将线性渐变分布在线性轴上，这样你就得到了想要的output。

  @override
  Widget build(BuildContext context) {
    const Gradient gradient = LinearGradient(
      colors: [Color(0xff9747FF), Color(0xff3B136F)],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
    );
    return Scaffold(
      body: Center(
        child: ShaderMask(
          shaderCallback: (size) => gradient.createShader(
            Rect.fromLTWH(0, 0, size.width, size.height + 24),
          ),
          child: const Text(
            'Tchove',
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontSize: 60,
            ),
          ),
        ),
      ),
    );
  }

Output：