SkeletonLoader class

A widget that shows a skeleton loading animation while data is being loaded.

The SkeletonLoader wraps any Flutter widget and automatically creates a skeleton version of it when isLoading is true. When the data is ready, it smoothly transitions to show the actual content.

The skeleton version mimics the structure of the original widget with a shimmer animation to indicate the loading state.

Example usage:

SkeletonLoader(
  isLoading: _isLoading, // Set to true while loading data
  child: Text('Content loaded successfully!'),
)

You can customize the appearance of the skeleton by adjusting the baseColor, highlightColor, and animation speed with shimmerDuration.

Inheritance

Constructors

SkeletonLoader.new({Key? key, required Widget child, required bool isLoading, Color baseColor = const Color(0xFFE0E0E0), Color highlightColor = const Color(0xFFEEEEEE), Duration shimmerDuration = const Duration(milliseconds: 1500), Duration transitionDuration = const Duration(milliseconds: 300)})
Creates a skeleton loader widget.
const

Properties

baseColor → Color
The base color of the skeleton.
final
child → Widget
The widget to display when loading is complete.
final
hashCode → int
The hash code for this object.
no setterinherited
highlightColor → Color
The highlight color for the shimmer effect.
final
isLoading → bool
Controls whether to show the skeleton or the actual content.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
shimmerDuration → Duration
The duration of one complete shimmer animation cycle.
final
transitionDuration → Duration
The duration of the transition between skeleton and content.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<SkeletonLoader>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited