Skip to content

Instantly share code, notes, and snippets.

@HansMuller
Created January 4, 2024 19:27
Show Gist options
  • Save HansMuller/e6c6352d4a475d6fb42b63ce83a826e2 to your computer and use it in GitHub Desktop.
Save HansMuller/e6c6352d4a475d6fb42b63ce83a826e2 to your computer and use it in GitHub Desktop.
// 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'),
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment