fluttertextgradientfade

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


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 !


Solution

  • 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),
              ),
            ),
          ),
        );
      }
    }
    

    enter image description here