Flutter Shimmer Loading: Skeleton Placeholders Guide
Learn flutter shimmer loading with the shimmer package, skeletonizer, and a custom build — skeleton cards, lists, placeholders, colors, and accessibility.
A spinner says "wait." A skeleton screen says "here's what's coming." That shimmering gray placeholder — the one you see in Facebook, LinkedIn, and YouTube while content loads — reduces perceived wait time and keeps your layout from jumping when data arrives. This flutter shimmer loading guide covers the three ways to build it: the popular shimmer package, the skeletonizer alternative, and a hand-rolled version when you want zero dependencies. Plus the parts most tutorials skip: theming the colors and keeping it accessible. What you'll learn The 2-minute shimmer package setup for skeleton placeholders Building shimmer cards, skeleton lists, and image placeholders Shimmer vs skeletonizer vs custom: which to pick Customizing baseColor and highlightColor for light and dark themes Accessibility: screen readers and reduced-motion users Why your shimmer sometimes doesn't animate (and the fix) Step 0 — Add the dependency The community-standard package is shimmer . Add it with no version pin and let pub resolve: flutter pub add shimmer That's the only setup. Everything below is Flutter 3.x compatible. Step 1 — Flutter shimmer loading: your first skeleton card The mental model: you build the *shape* of your content with plain gray boxes, then wrap the whole thing in Shimmer.fromColors . The shimmer paints a moving highlight gradient across whatever it wraps: import 'package:flutter/material.dart'; import 'package:shimmer/shimmer.dart'; class ArticleSkeletonCard extends StatelessWidget { const ArticleSkeletonCard({super.key}); @override Widget build(BuildContext context) { return Shimmer.fromColors( baseColor: Colors.grey.shade300, highlightColor: Colors.grey.shade100, child: Card( child: Padding( padding: const EdgeInsets.all(16),…