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

Flutter button which expands when pressed

I have an ElevatedButton, and I’d like it to response to the user’s touch by growing slightly in size, say around 10%

Ideally it would be an animation with a smooth change in size as you press and release the button. A kind of touch feedback, but altering the button size rather than changing colour or using ripple effects.

Tags:

2

Answers


  1. 0

    you can make this using AnimatedContainer, for changing button size you have to wrap your AnimatedContainer with AnimatedSize widget.

    Here I create an animation where i exactly make this animation. take a look then implement your logic.

    https://www.linkedin.com/posts/shafi-munshi_flutter-dart-flutterabranimation-activity-7190095624216743937-vxQF?utm_source=share&utm_medium=member_desktop

    Login or Signup to reply.
  2. 0

    One way to achieve this is using a ButtonStyle. You can pass a class implementing MaterialStateProperty<Size?> to minimum size, which will allow you to increase the size when the button is in the pressed state.

    ElevatedButton(
  onPressed: () {},
  style: ButtonStyle(minimumSize: MyMinimumSize()),
  child: const Text('Press me'),
),

    class MyMinimumSize extends MaterialStateProperty<Size?> {
  @override
  Size? resolve(Set<MaterialState> states) {
    if (states.contains(MaterialState.pressed)) {
      return const Size(120, 50);
    } else {
      return const Size(90, 40);
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search