How can I create a fixed gradient opacity for text or images in Flutter?

Question

Seeking guidance on implementing a stationary gradient opacity in Flutter for text. The goal is to establish a constant gradient that smoothly transitions to transparency, devoid of any motion or animation. Any advice or code snippets demonstrating how to accomplish this would be highly valued. Thank you!

I haven't found much on the subject !

Answer 1

Text gradient

Please take a look at Gradient Text in Flutter.

Dealing with text overflow

If you want to deal with overflows of texts, you could take a look at the TextOverflow.fade property.

Background gradient

You can use a LinearGradient. As you can see, the background color transitions from the first specified color to the last specified color. Please also note the that the first two letters, which correspond to the alpha value (00 = transparent) decrease, which generate results in the desired gradient.

Code is a slightly adjusted version from https://api.flutter.dev/flutter/painting/LinearGradient-class.html

class MoodyGradient extends StatelessWidget {
  const MoodyGradient({super.key});

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment(0.8, 1),
            colors: <Color>[
              Color(0xff1f005c),
              Color(0xcc5b0060),
              Color(0xaa870160),
              Color(0x88ac255e),
              Color(0x66ca485c),
              Color(0x44e16b5c),
              Color(0x22f39060),
              Color(0x00ffb56b),
            ], // Gradient from https://learnui.design/tools/gradient-generator.html
            tileMode: TileMode.mirror,
          ),
        ),
        child: const Center(
          child: Text(
            'From Night to Day',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}