Components
FxShimmer
A premium kinetic loading effect.
FxShimmer
FxShimmer provides a gradient animation that mimics data loading. It is typically used as a placeholder before content arrives.
Usage
The most common way to use a shimmer is via the Fx DSL:
Fx.shimmer(
child: Fx.box().w(200).h(20),
)Kinetic Masking
You can wrap complex widget trees inside a Fx.shimmer to apply a unified kinetic gradient across the entire group. This is perfect for list tiles and profile cards.
Fx.shimmer(
child: Fx.row(
children: [
Fx.box().wh(50, 50).roundedFull(), // Shimmering Avatar
Fx.gap(12),
Fx.box().w(100).h(12), // Shimmering Text line
],
),
)Style
Inherits styling from FxStyle.
- borderRadius: Controls rounded corners (Default: 8).
- width/height: Dimensions of the shimmering block.
The Master Shimmer Implementation
Creating a complex "Skeleton Screen" for a profile feed using compositional shimmers.
class ProfileSkeleton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Fx.box(
child: Fx.col(
children: [
// Header Row
Fx.row(
children: [
Fx.shimmer().wh(60, 60).circle(), // Avatar Placeholder
Fx.gap(16),
Fx.col(
cross: CrossAxisAlignment.start,
children: [
Fx.shimmer().w(120).h(16).rounded(4), // Name Placeholder
Fx.gap(8),
Fx.shimmer().w(80).h(12).rounded(4), // Handle Placeholder
],
),
],
),
Fx.gap(24),
// Content Blocks
Fx.shimmer().w(double.infinity).h(14).rounded(4),
Fx.gap(10),
Fx.shimmer().w(double.infinity).h(14).rounded(4),
Fx.gap(10),
Fx.shimmer().w(200).h(14).rounded(4),
Fx.gap(24),
// Large Hero Image Placeholder
Fx.shimmer().w(double.infinity).h(200).rounded(16),
],
)
)
.p(24)
.bg(Colors.white)
.rounded(24);
}
}Fluxy shimmers use a native-backed shader implementation that ensures zero CPU overhead for the animation, maintaining perfect UI fluidity even during heavy network activity.