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 classclass _ContactListScreenState extends State<ContactListScreen> with TickerProviderStateMixin {//...// SOLUTION #2 Create an animation controllerlate final AnimationController _controller = AnimationController(duration: const Duration(milliseconds: 500),vsync: this,)..repeat(reverse: true);// SOLUTION #3 Create an animation that uses the animation controllerlate 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 ...