Skeleton

A placeholder component that displays a shimmer effect while content is loading. Skeleton loaders provide visual feedback to users that content is being fetched, improving perceived performance and user experience.

The Skeleton widget provides customizable shimmer animations that can mimic the shape and layout of your actual content. It supports various sizes, shapes, and layouts to match different UI patterns.

• Customizable: Supports various sizes, shapes, colors, and border radius options.
• Shimmer Animation: Built-in shimmer effect for smooth loading animations.
• Flexible Layout: Can be combined to create complex loading layouts.

---

Variants

Rectangle

A simple rectangular skeleton for text placeholders.

Preview

Code

Skeleton(
  width: 350,
  height: 200,
)

---

Circle

A circular skeleton for avatar or profile picture placeholders.

Preview

Code

Skeleton(
  width: 60,
  height: 60,
  borderRadius: BorderRadius.all(Radius.circular(60)),
)

---

Avatar with Text

A combination of circular and rectangular skeletons mimicking a user profile layout.

Preview

Code

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Skeleton(
      width: 48,
      height: 48,
      borderRadius: BorderRadius.all(Radius.circular(48)),
    ),
    SizedBox(width: 12),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Skeleton(width: double.infinity, height: 14),
          SizedBox(height: 8),
          Skeleton(width: 180, height: 14),
        ],
      ),
    ),
  ],
)

---

Card List

Multiple skeleton cards arranged in a list layout for content loading states.

Preview

Code

Column(
  children: List.generate(
    2,
    (index) => Padding(
      padding: EdgeInsets.symmetric(vertical: 8),
      child: Row(
        children: [
          Skeleton(width: 80, height: 80),
          SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Skeleton(width: double.infinity, height: 16),
                SizedBox(height: 8),
                Skeleton(width: 150, height: 14),
              ],
            ),
          ),
        ],
      ),
    ),
  ),
)

---

Properties

Property	Type	Description
width	double	The width of the skeleton box. Required.
height	double	The height of the skeleton box. Required.
borderRadius	BorderRadius	The border radius of the skeleton boxColor
baseColor	Color	The base shimmer Color
highlightColor	Color	The highlight shimmer Color
margin	EdgeInsetsGeometry?	Optional margin around the skeleton.
padding	EdgeInsetsGeometry?	Optional padding inside the skeleton.