Flutter transparent button elevation - flutter

Question

I created a custom button that I want to give a color and an elevation. Works finde, except when I give the button the color Colors.transparent. Here is an example to showcase my problem:
Widget buildButton(void Function() onPressed, String label, double? elevation) {
return OutlinedButton(
onPressed: onPressed,
child: Text(label),
style: OutlinedButton.styleFrom(
backgroundColor: Colors.white,
side: BorderSide(
width: 2,
color: Colors.blue,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: elevation ?? 0
),
);
}
class ButtonsDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
buildButton(() {}, "Button", null),
buildButton(() {}, "Button", 5),
],
),
),
);
}
}
The buttons look like this:
Here is how they should look like (I set the color of the buttons to the background color of the screen to showcase them, but I can't do that in my code):
I tried this answer but it only got me so far (I don't know if I did it completely wrong, but it looks so):
I also tried this answer and it got me there:
So, as you can see, both of them answers haven't helped me at all. Can anyone show me how I can add elevation to a transparent button?

Answer 1

The best solution to your problem is to use ElevatedButton instead of OutlinedButton and to give it a shadowColor. The code below is for the second button, please give it a try.
ElevatedButton(
onPressed: () {},
child: Text(
'Elevated',
style: TextStyle(color: Colors.black),
),
style: ElevatedButton.styleFrom(
elevation: 5,
primary: Colors.transparent,
shadowColor: Colors.transparent.withOpacity(0.1),
side: BorderSide(
width: 2,
color: Colors.blue,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
),