layer_builder_example1.dart

// Allow arbitrary foreground and background elements for ButtonStyle

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,
            backgroundBuilder: (BuildContext context, Set<MaterialState> states, Widget? child) {
              return Ink( // So that the button's overlay continues to appear.
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: <Color>[
                      colorScheme.primaryContainer,
                      colorScheme.tertiaryContainer,
                    ],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                ),
                child: child,
              );
            },
            foregroundBuilder: (BuildContext context, Set<MaterialState> states, Widget? child) {
              return ShaderMask(
                shaderCallback: (Rect bounds) {
                  return LinearGradient(
                    begin: Alignment.bottomCenter,
                    end: Alignment.topCenter,
                    colors: <Color>[
                      colorScheme.primary,
                      colorScheme.primaryContainer,
                    ],
                  ).createShader(bounds);
                },
                blendMode: BlendMode.srcATop,
                child: child,
              );
            },
          ),
          child: Text('Elevated Button'),
        ),
      ),
    );
  }
}