Flutter Pro Design

Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

Newsletter? Nah, I hate them.

Follow me on and catch new details?

Load images smoothly

By default, images in Flutter load with no transition. They just pop in.

Use image_fade to show a placeholder while loading, then cross-fade to the loaded image or an error widget:

ImageFade(
  image: NetworkImage(
    'https://example.com/image.png',
  ),
  // or 
  // image: AssetImage(
  //   'assets/image.png',
  // ),
  placeholder: Container(
    color: Colors.grey.shade100,
  ),
  errorBuilder: (context, exception) {
    return Container(
      color: Colors.grey.shade100,
      child: Icon(
        Icons.error_outline,
        size: 20,
        color: Colors.grey.shade400,
      ),
    );
  },
)

Keep placeholders simple: a solid light grey or a shimmer. Avoid loading indicators, they're distracting.

Same for error states: keep them subtle. A small icon at most, no technical messages.

image takes any ImageProvider: NetworkImage, AssetImage, CachedNetworkImageProvider, ExtendedNetworkImageProvider, etc.

It also supports width, height, fit, duration, syncDuration and more. Check the docs.