CODEWITHSUNDEEP
flutterfontsgradient
Plopen
Plopen

Reputation: 13

How can I split a text in 2 color vertically in Flutter

I'm new to Flutter and trying to do something similar to this :

div {
  font: 40px Arial;
  background: -webkit-linear-gradient(top, #0d2172 0%,#0d2172 50%,#ff2828 50%,#ff0000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

but in Flutter.

I've tried with gradient and a shaderMask already, but it's not what I want...

Any ideas?

Thank you very much

Upvotes: 1

Views: 384

Answers (1)

Lerex
Lerex

Reputation: 343

This is what I have managed to do with flutter . Propably works for you
ReCreation in flutter


You first need to add the Gradient

final Gradient  _gradient = const LinearGradient(
        begin:  Alignment(0.5, 1),
        end: Alignment(0.5, 0),
        colors: <Color>[
          Color(0xff1f005c),
          Color(0xffffb56b),
          
        ],
        stops : [1,1],
        tileMode: TileMode.clamp,
      );

Then you change your text to this :

ShaderMask(
      blendMode: BlendMode.modulate,
      shaderCallback: (size) => _gradient.createShader(
        Rect.fromLTWH(0, 0, size.width, size.height),
      ),
      child: Text(
        'ABCDEFGH',
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
          fontSize: 60,
        ),),
      )

Upvotes: 1

Related Questions