Shimmer & Skeleton Effects In Flutter

2 min readNov 30, 2023

In Flutter, the shimmer and skeleton effects are both visual techniques used to provide a pleasing and informative placeholder while data is loading.

Shimmer Effect

The shimmer effect creates a shimmering, pulsating overlay on the UI elements that will eventually display the actual data. It simulates the movement of light across a surface, giving the impression of movement and liveliness. This effect is particularly useful for loading indicators, such as list items or images.

Skeleton Effect

The skeleton effect, also known as placeholder loading, creates a simplified outline of the UI elements that will eventually display the actual data. It provides a visual representation of the content structure, helping users understand the layout of the page even before the data is loaded. This effect is particularly useful for complex UI components, such as forms or dashboards.

Benefits of Shimmer and Skeleton Effects

Improved user experience: Shimmer and skeleton effects provide a more engaging and informative loading experience, reducing perceived waiting time and keeping users engaged.
Enhanced visual feedback: These effects communicate to users that data is being loaded and provide context about the upcoming content.
Streamlined development: Using packages and techniques simplifies the implementation of these effects, saving developers time and effort.

Implementation In Flutter

Shimmer

For implementing shimmer you can use https://pub.dev/packages/shimmer

SizedBox(
  width: 200.0,
  height: 100.0,
  child: Shimmer.fromColors(
    baseColor: Colors.red,
    highlightColor: Colors.yellow,
    child: Text(
      'Shimmer',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
        fontWeight:
        FontWeight.bold,
      ),
    ),
  ),
);