Flutter Pro Design

Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

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.