...

/

Solution: Beating Heart

Solution: Beating Heart

Explore solutions to the beating heart challenges.

Solutions

Great job on completing all the steps in the previous challenge! Feel free to compare your code solutions with the solutions below:

// SOLUTION #1 - add TickerProviderStateMixin to the widget state class
class _ContactListScreenState extends State<ContactListScreen> with TickerProviderStateMixin {
//...
// SOLUTION #2 Create an animation controller
late final AnimationController _controller = AnimationController(
duration: const Duration(milliseconds: 500),
vsync: this,
)..repeat(reverse: true);
// SOLUTION #3 Create an animation that uses the animation controller
late final Animation<double> _animation =
Tween<double>(begin: 16, end: 24).animate(_controller);
// SOLUTION #4 - Use an animated builder to animate the heart icon
// ...
AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Icon(
Icons.favorite,
color: Colors.red,
size: _animation.value,
);
},
),
// SOLUTION #5 - dispose the animation controller on widget dispose
_controller.dispose();
Beating heart solution

Challenge 1: Add TickerProviderStateMixin

First, on lines 15-16 of the contact_list_screen.dart file, we add TickerProviderStateMixin to the ContactListScreen widget. This adds a ...