Skip to content

Instantly share code, notes, and snippets.

@HansMuller

HansMuller/button_gradient_background_example.dart

Created January 3, 2024 23:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save HansMuller/d2b6440b72a1b3a660c44b5ca5247e97 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save HansMuller/d2b6440b72a1b3a660c44b5ca5247e97 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. HansMuller created this gist Jan 3, 2024.
    51 changes: 51 additions & 0 deletions button_gradient_background_example.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    // 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'),
    ),
    ),
    ),
    ),
    );
    }
    }