flutter linear gradient text from top center to bottom center

Question

I want to display text gradient from top center to bottom center and I use the below code, but I don't know why the colors display other type of color while I change the linear gradients begin and end properties. The image below is the output that I want to display.

.

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

Specify the height and width of the shade using Rect.fromLTWH

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

Note: Extra 24 height is to spread the linear gradient across the linear axis, so that you get the desired 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: