button_gradient_background_example.dart

// See "Add Decoration to ButtonStyleButton's styling"
// https://github.com/flutter/flutter/issues/130335#issuecomment-1782727064

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: () {},
          clipBehavior: Clip.antiAlias, // Buttons don't clip their child by default.
          style: ElevatedButton.styleFrom(
            padding: EdgeInsets.zero,  // So that the gradient fills the entire button.
            textStyle: theme.textTheme.displayLarge,
          ),
          child: 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: const Padding(
              padding: EdgeInsets.symmetric(horizontal: 16),
              child: Text('Elevated Button'),
            ),
          ),
        ),
      ),
    );
  }
}