button_shader_mask_example.dart

// See Allow arbitrary foreground and background elements for ButtonStyle
// https://github.com/flutter/flutter/issues/139456

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Home()));
}

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final ColorScheme colorScheme = theme.colorScheme;
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () { },
          style: ElevatedButton.styleFrom(
            textStyle: theme.textTheme.displayLarge,
          ).copyWith(
            // Lighten the hovered overlay color a little so that it doesn't
            // obscure the faded part of the shader masked child.
            overlayColor: MaterialStateProperty.resolveWith(
              (Set<MaterialState> states) {
                if (states.contains(MaterialState.hovered)) {
                  return colorScheme.primary.withOpacity(0.04);
                }
                return null; // defer to the default
              },
            ),
          ),
          child: ShaderMask(
            shaderCallback: (Rect bounds) {
              return LinearGradient(
                begin: Alignment.bottomCenter,
                end: Alignment.topCenter,
                colors: <Color>[
                  colorScheme.primary,
                  colorScheme.primaryContainer,
                ],
              ).createShader(bounds);
            },
            blendMode: BlendMode.srcATop,
            child: const Text('Elevated Button'),
          ),
        ),
      ),
    );
  }
}