For this intermediate challenge, create this 3D pushable button:

Open preview in a separate page

Starter Project

You can grab the starter project for this challenge here:
v0.1.0, updated: 2024-02-28

Check the README for how to use it.

Primary Goals

Create a 3D pushable button:

  • Replace the ElevatedButton inside the PushableButton class with a custom UI layout
  • Use GestureDetector to handle taps and drag events
  • When the button is pressed, trigger the onPressed callback so the parent widget can update
  • Add some animation code to update the button UI when pressed

Stretch Goals

  • Ensure the button behaves correctly and does not get stuck when various combinations of gestures are applied
  • If a shadow argument is given, ensure it is applied to the button

What You Will Learn

  • How to work with Stack and Positioned widgets
  • How to apply custom decorations to Container widgets
  • How to work with HSL colors
  • How to combine GestureDetector, AnimationController, and AnimatedBuider to create a custom animated UI button
  • How to create a reusable button component

Official resources from

Additional resources from Code with Andrea:

Questions? Let's chat