flutter_auto_shimmer 0.0.2

flutter_auto_shimmer: ^0.0.2 copied to clipboard

flutter_shimmer #

Tiny, dependency‑free shimmer effect for any widget. Wrap your widget with AutoShimmer to get a smooth, animated loading state with preserved border radii and customizable colors.

The package focuses on doing one thing well: applying a performant shimmer via ShaderMask to your own skeleton layout or real widgets while loading.

Features #

• Drop‑in wrapper: AutoShimmer(child: ...)
• Customizable base/highlight colors and duration
• Respects rounded corners when possible
• Lightweight: no 3rd‑party dependencies
• Works anywhere: lists, cards, buttons, images

Installation #

dependencies:
  flutter_shimmer: ^0.0.1

Or:

dart pub add flutter_shimmer

Quick start #

import 'package:flutter/material.dart';
import 'package:flutter_shimmer/flutter_shimmer.dart';

class Demo extends StatelessWidget {
  const Demo({super.key});

  @override
  Widget build(BuildContext context) {
    final bool isLoading = true;

    return AutoShimmer(
      showShimmer: isLoading,
      baseColor: Colors.grey.shade300,
      highlightColor: Colors.grey.shade100,
      child: Container(
        height: 120,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16),
        ),
      ),
    );
  }
}

Skeleton example (avatar + title + subtitle) #

AutoShimmer does not auto‑infer semantic shapes. Provide a simple placeholder layout as the child while loading:

AutoShimmer(
  showShimmer: isLoading,
  baseColor: Colors.grey.shade300,
  highlightColor: Colors.grey.shade100,
  child: Container(
    padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16),
    ),
    child: Row(
      children: [
        Container(
          width: 56,
          height: 56,
          decoration: const BoxDecoration(
            color: Colors.grey,
            shape: BoxShape.circle,
          ),
        ),
        const SizedBox(width: 16),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _bar(width: 140, height: 16),
              const SizedBox(height: 8),
              _bar(width: 100, height: 14),
              const SizedBox(height: 8),
              _bar(width: 180, height: 14),
            ],
          ),
        ),
      ],
    ),
  ),
)

Widget _bar({required double width, required double height}) => Container(
  width: width,
  height: height,
  decoration: BoxDecoration(
    color: Colors.grey.shade300,
    borderRadius: BorderRadius.circular(8),
  ),
);

See example/lib/main.dart for a complete demo.

API #

Border radius: when possible, the wrapper tries to extract a BorderRadius from common patterns like a Container with BoxDecoration and applies it so the shimmer respects rounded corners. Falls back to square if none detected.

Performance tips #

• Prefer const in skeletons
• Keep gradients simple (defaults are optimized)
• In lists, build lazily with ListView.builder

FAQ #

• Can it auto‑detect avatar/title/subtitle? Not generically. Provide a small skeleton layout.
• Does it clip to my card radius? Yes, when a radius can be inferred.
• Can I disable animation but keep placeholders? Set showShimmer: false.

Contributing #

Issues and pull requests are welcome. Please file bugs and ideas on the GitHub issue tracker.

License #

MIT – see LICENSE.