Applicare uno ShaderMask in Flutter

ShaderMask è un widget per Flutter che ci consente di applicare una "maschera" generata da uno "shader" ad un widget.

Detto così non vuol dire molto, quindi facciamo subito un esempio.

Vi ho messo un testo un pò lungo così vedete bene di cosa si tratta:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepPurple,
        ),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Flutter Test'),
      ),
      body: Center(
        child: ShaderMask(
          shaderCallback: (Rect bounds) {
            return RadialGradient(
              center: Alignment.bottomCenter,
              radius: 4.0,
              colors: <Color>[Colors.yellow, Colors.deepOrange.shade900],
              tileMode: TileMode.mirror,
            ).createShader(bounds);
          },
          child: const Text(
            'ABCDEFGHIJKLMNOPQRSTUVXXYZ',
            style: TextStyle(
              color: Colors.white,
              backgroundColor: Colors.black,
            ),
          ),
        ),
      ),
    );
  }
}

Fate qualche esperimento coi parametri per capire meglio come funziona!

Enjoy!