0

I'm relatively new to flutter. As I was looking for UI, to replicate for practise, I came across one with a beautiful button. Below is the picture of the design for reference.
enter image description here

My aim is to let the user tap the button and it should change the button's design/state from lifted to depressed i.e. the shadows should change from falling around the button to falling inside the button.

I managed to replicate the square button at the bottom, but I could not replicate the one on the top.
Below is the code of the bottom square button from the picture:

Center(
  child: GestureDetector(
    onTap: () {},
    child: Container(
      height: 300.0,
      width: 300.0,
      decoration: BoxDecoration(
        color: Colors.grey.shade300,
        borderRadius: BorderRadius.circular(50.0),
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.grey.shade100,
            offset: Offset(_offset * -1, _offset * -1),
            blurRadius: 8.0,
          ),
          BoxShadow(
            color: Colors.grey.shade500,
            offset: Offset(_offset, _offset),
            blurRadius: 8.0,
          ),
        ],
      ),
    ),
  ),
)

For further reference, i'm attaching a similar design, but instead of a button, it's a search bar.enter image description here

How can I achieve this design and the feature of changing button design on tap?


Edit: My main concern is that i'm unable to replicate the "pressed" design of the button

pratik97179
  • 133
  • 1
  • 2
  • 12

1 Answers1

1

You can use GestureDetector for it:

GestureDetector(
    onTapDown: () {
        pressing = true;
    },
    onTapUp: () {
        pressing = false;
    }

)

Anas Nadeem
  • 779
  • 6
  • 10
  • The problem is that i'm not able to replicate the pressed design, i.e. the button should have shadows inside it, instead of surrounding it. – pratik97179 Oct 10 '21 at 06:14
  • check this:https://stackoverflow.com/questions/54061964/inner-shadow-effect-in-flutter – Anas Nadeem Oct 10 '21 at 11:40