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

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
  },
)

CodePudding user response：

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 :-

CodePudding user response：

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'),
    ),
)