Built In Animation

At this point, your app has all the functionality that you'll implement.

There are some easy animations Flutter gives you that will enhance the UX by a mile.

  • Add placeholder for images, so they fade in on load.
  • Add a hero animation that connects your DogCard to the dog_detail_page.

1. Add an AnimatedCrossFade to load Widgets on state change

This all happens in your _DogCardState class.

  1. // dog_card.dart
  3. Widget get dogImage {
  4.   var dogAvatar = Container(
  5.     width: 100.0,
  6.     height: 100.0,
  7.     decoration: BoxDecoration(
  8.       shape: BoxShape.circle,
  9.       image: DecorationImage(
  10.         fit: BoxFit.cover,
  11.         image: NetworkImage(renderUrl ?? ''),
  12.       ),
  13.     ),
  14.   );
  16.   // Placeholder is a static container the same size as the dog image.
  17.   var placeholder = Container(
  18.     width: 100.0,
  19.     height: 100.0,
  20.     decoration: BoxDecoration(
  21.       shape: BoxShape.circle,
  22.       gradient: LinearGradient(
  23.         begin: Alignment.topLeft,
  24.         end: Alignment.bottomRight,
  25.         colors: [Colors.black54, Colors.black, Colors.blueGrey[600]],
  26.       ),
  27.     ),
  28.     alignment: Alignment.center,
  29.     child: Text(
  30.       'DOGGO',
  31.       textAlign: TextAlign.center,
  32.     ),
  33.   );
  35.   // This is an animated widget built into flutter.
  36.   return AnimatedCrossFade(
  37.     // You pass it the starting widget and the ending widget.
  38.     firstChild: placeholder,
  39.     secondChild: dogAvatar,
  40.       // Then, you pass it a ternary that should be based on your state
  41.       //
  42.       // If renderUrl is null tell the widget to use the placeholder,
  43.       // otherwise use the dogAvatar.
  44.     crossFadeState: renderUrl == null
  45.         ? CrossFadeState.showFirst
  46.         : CrossFadeState.showSecond,
  47.      // Finally, pass in the amount of time the fade should take.
  48.     duration: Duration(milliseconds: 1000),
  49.   );
  50. }

Give your app a full restart and you should see it fade in (slowly) when the image is loaded.