SkeletonHelper class

Skeleton Helper

A comprehensive helper for creating skeleton loading placeholders. Supports multiple shapes, animation styles, and pre-built presets.

Usage:

// Simple shapes
SkeletonHelper.rectangle(width: 200, height: 100);
SkeletonHelper.circle(size: 48);
SkeletonHelper.text(lines: 3);

// With custom animation
SkeletonHelper.card(
  config: SkeletonConfig(
    animationType: SkeletonAnimationType.pulse,
    baseColor: Colors.grey[300]!,
  ),
);

// Themed
SkeletonTheme(
  config: SkeletonConfig.dark(),
  child: SkeletonHelper.listItem(),
);

Properties

hashCode → int

The hash code for this object.

no setter, inherited

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

Methods

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toString() → String

A string representation of this object.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited

Static Methods

article({bool showImage = true, double imageHeight = 200, int paragraphs = 2, int linesPerParagraph = 4, bool showMeta = true, SkeletonConfig? config}) → Widget

Create an article skeleton

avatar({double size = 48, SkeletonAvatarStyle style = SkeletonAvatarStyle.circle, double radius = 8, SkeletonConfig? config, EdgeInsetsGeometry? margin}) → Widget

Create an avatar skeleton

card({double? width, double imageHeight = 150, int lines = 3, double borderRadius = 12, bool showImage = true, SkeletonConfig? config}) → Widget

Create a card skeleton

cardHorizontal({double? width, double imageWidth = 120, int lines = 2, double borderRadius = 12, SkeletonConfig? config}) → Widget

Create a horizontal card skeleton

circle({double size = 48, SkeletonConfig? config, EdgeInsetsGeometry? margin}) → Widget

Create a circle skeleton

custom({double? width, double? height, required CustomClipper<Path> clipper, SkeletonConfig? config, EdgeInsetsGeometry? margin}) → Widget

Create a custom shape skeleton

grid({int crossAxisCount = 2, int itemCount = 6, double spacing = 12, double childAspectRatio = 1.0, EdgeInsetsGeometry padding = const EdgeInsets.all(16), double itemBorderRadius = 12, SkeletonConfig? config, Widget itemBuilder(BuildContext, int)?}) → Widget

Create a grid of skeleton items

list({required int itemCount, required Widget itemBuilder(int index), double spacing = 0, EdgeInsetsGeometry padding = EdgeInsets.zero, bool shrinkWrap = true, ScrollPhysics? physics = const NeverScrollableScrollPhysics()}) → Widget

Create a list of skeleton items

listItem({bool showAvatar = true, double avatarSize = 48, int lines = 2, double spacing = 12, EdgeInsetsGeometry padding = const EdgeInsets.symmetric(horizontal: 16, vertical: 12), SkeletonConfig? config}) → Widget

Create a list item skeleton

loadingState({required bool isLoading, required Widget child, required Widget skeleton, Duration? animationDuration, Curve curve = Curves.easeInOut}) → Widget

Wrap content with loading state

paragraph({int lines = 3, double lineHeight = 12, double spacing = 8, double lastLineWidth = 0.6, SkeletonConfig? config, EdgeInsetsGeometry? margin}) → Widget

Create a paragraph skeleton (multiple lines)

product({double? width, double imageHeight = 180, double borderRadius = 12, bool showRating = true, bool showAction = false, SkeletonConfig? config}) → Widget

Create a product card skeleton

productGrid({int crossAxisCount = 2, int itemCount = 4, double spacing = 12, EdgeInsetsGeometry padding = const EdgeInsets.all(16), SkeletonConfig? config}) → Widget

Create a product grid skeleton

productHorizontal({double? height, double imageWidth = 100, double borderRadius = 12, SkeletonConfig? config}) → Widget

Create a horizontal product skeleton

profile({double avatarSize = 80, int infoLines = 2, bool showStats = false, int statsCount = 3, SkeletonConfig? config}) → Widget

Create a profile skeleton

profileHorizontal({double avatarSize = 56, int lines = 2, bool showAction = false, SkeletonConfig? config}) → Widget

Create a horizontal profile skeleton

rectangle({double? width, double height = 16, BorderRadius? borderRadius, SkeletonConfig? config, EdgeInsetsGeometry? margin}) → Widget

Create a rectangle skeleton

repeat({required int count, required Widget child, double spacing = 0}) → List<Widget>

Create multiple copies of a skeleton widget

rounded({double? width, double height = 48, double radius = 12, SkeletonConfig? config, EdgeInsetsGeometry? margin}) → Widget

Create a rounded rectangle skeleton

socialPost({bool showImage = true, double imageHeight = 300, int actionCount = 3, bool showComments = false, int commentCount = 2, SkeletonConfig? config}) → Widget

Create a social media post skeleton

story({double size = 72, bool showLabel = true, SkeletonConfig? config}) → Widget

Create a story thumbnail skeleton

storyRow({int count = 5, double storySize = 72, double spacing = 12, EdgeInsetsGeometry padding = const EdgeInsets.symmetric(horizontal: 16, vertical: 12), SkeletonConfig? config}) → Widget

Create a row of story skeletons

text({double? width, double height = 12, double radius = 4, SkeletonConfig? config, EdgeInsetsGeometry? margin}) → Widget

Create a text line skeleton