Question 78228 in Flutter Question posted in
The official Flutter documentation can be found here.

How to create a button in Neumorphism which is clickable? – Flutter

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

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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'),
    ),
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search