Challenge

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:

c005_pushable_button_starter.zip
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

Useful Links and Resources

Official resources from Flutter.dev:

• Stack class
• GestureDetector class
• AnimationController class
• AnimatedBuilder class

Additional resources from Code with Andrea:

• HSL Colors Explained: What they are and when to use them in Dart/Flutter
• Explicit Animations module of my Flutter Animations Masterclass