Creating Bevelled Button In Flutter
Small Disclaimer: This article is inspired from a similar article by Aminullah. This is more of an updated version of that article with some extra explanation of the code.
Let’s Jump Right In, Here’s The Code! ✨
ElevatedButton(
style: ElevatedButton.styleFrom(
padding: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25))), #1
onPressed: () {},
child: Ink( #2
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red.withOpacity(0.6), Colors.red], // #3
begin: Alignment.topCenter,
end: Alignment.bottomCenter),
borderRadius: BorderRadius.circular(25)), #4
child: IntrinsicHeight( // #5
child: IntrinsicWidth( // #6
child: Container(
padding: const EdgeInsets.all(12.0),
alignment: Alignment.center,
child: const Text("Tropical Theme")),
),
),
),
)Explanation
#1 — border radius must overflow to make a full rounded button. If your text is bigger, give a higher value like 100, or so
#2 — Ink widget is used as A convenience widget for drawing images and other decorations (Flutter documentation). In this case, we are using it to paint linear gradient. We can also use DecoratedBox, and currently I did not really understand the difference between those two.
#3 — Define as many colors as you like for the gradient. Using withOpacity will create a nice one color gradation.
#4 — border radius must be the same as #1, if not there might be cases where your ink widget overflows.
#5 & #6 — Intrinsic width and intrinsic height might be needed if your button is not constrained. Try removing it and see if your button expands crazily or not.
I was inspired to write this article while working on a task. Thankfully the other guide is not updated so it gives me an excuse to write this article 😆. Be sure to tell me the differences between DecoratedBox and Ink class in the comment if you know it. Thank you for reading
Other reading material:
