How to create a button in Neumorphism which is clickable? - flutter

Question

So far I can only get the design part but not implement the onPressed or clicked part. When it is pressed I want it to behave live a normal Elevated or raised button.
I can use GestureDetecter and use the onTap function, but how to animate it like its been actually pressed ?
Here is the code so far
Container(
width: 200,
height: 50,
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Colors.grey[400],
blurRadius: 20,
offset: Offset(0, 10),
),
BoxShadow(
color: Colors.white,
blurRadius: 20,
offset: Offset(0, -10),
),
],
),
child: Center(
child: Text('Button'),
),
onPressed: () {
// Show the text panel here
},
)

Answer 1

You can use TextButton widget wrap with your Container widget. just like this.
Container(
width: 200,
height: 50,
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Colors.grey[400]!,
blurRadius: 20,
offset: const Offset(0, 10),
),
const BoxShadow(
color: Colors.white,
blurRadius: 20,
offset: Offset(0, -10),
),
],
),
child: TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(
Colors.white)),
onPressed: () {
// Button tap action.
},
child: const Text('Elevated Button'),
),
)

Answer 2

There is a package that contains all the Neumorphism widgets in it "flutter_neumorphic"(https://pub.dev/packages/flutter_neumorphic)
First, install and import the package then you should use NeumorphicButton(there are many properties in this widget with which you can modify and get the effect you want, To learn more about it visit "flutter_neumorphic" offical website) : -
NeumorphicButton(
onPressed: () {},
child: const Text("Click me"),
),
Output :-