silver_shimmer 0.0.9

Published Aug 12, 2025

SDKflutter

Platformandroidioswindowslinuxmacosweb

A customizable Flutter package for creating elegant shimmer loading effects. Supports classic, wave, and pulse shimmer styles with flexible configuration options.

Silver Shimmer

A customizable Flutter package for creating elegant shimmer loading effects in your applications. Silver Shimmer provides an easy way to add shimmer animations to any widget with flexible configuration options.

Preview

Silver Shimmer Preview

Shimmer Customization Option

Property	Type	Default	Description
`duration`	`Duration`	`Duration(seconds: 2)`	Base duration of a shimmer cycle (before applying `speedFactor`).
`speedFactor`	`double`	`1.0`	Multiplies duration to speed up or slow down the animation.
`baseColor`	`Color`	`Color(0xFFE0E0E0)`	The background color of the shimmer.
`highlightColor`	`Color`	`Color(0xFFF5F5F5)`	The highlight (glow) color of the shimmer.
`gradientColors`	`List<Color>?`	`null`	Optional custom gradient colors (overrides base/highlight if set).
`direction`	`ShimmerDirection`	`ShimmerDirection.leftToRight`	Direction of shimmer movement (horizontal, vertical, diagonal).
`effect`	`ShimmerEffect`	`ShimmerEffect.classic`	Type of shimmer: `classic`, `wave`, or `pulse`.
`disableAfter`	`Duration?`	`null`	Automatically disables shimmer after the specified time.
`shimmerAngle`	`double?`	`null`	Angle (in degrees) for custom shimmer direction. Overrides `direction`.
`shimmerSizeFactor`	`double`	`1.0`	Scales the gradient stops to make shimmer larger/smaller.
`borderRadius`	`BorderRadius?`	`8.0`	Optional border radius for container shimmer effects (via wrapper).

Features

Apply shimmer effects to any widget with a simple extension method
Multiple shimmer effect styles: classic, wave, and pulse
Customizable shimmer direction (left-to-right, top-to-bottom, diagonal)
Configurable colors, speed, duration, and angle
Global theme configuration
Automatic disabling after a specified duration
Border radius support for container shimmer effects

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  silver_shimmer: ^0.0.1

Run:

flutter pub get

Usage

Basic Usage

Apply the shimmer effect to any widget using the extension method:

// Simple Text with shimmer
Text('Loading content...').shimmer(shimmer: isLoading)

// Container with shimmer
Container(
  height: 100,
  color: Colors.grey[300],
).shimmer(shimmer: isLoading)

Global Configuration

Configure default shimmer properties for your entire application:

void main() {
  ShimmerTheme().update(
    duration: Duration(seconds: 1),
    baseColor: Colors.grey[300]!,
    highlightColor: Colors.grey[100]!,
    direction: ShimmerDirection.leftToRight,
    effect: ShimmerEffect.classic,
  );
  
  runApp(MyApp());
}

Complete Example

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

void main() {
  ShimmerTheme().update(
    duration: Duration(seconds: 3),
    speedFactor: 3.5,
    baseColor: Colors.grey[300]!,
    highlightColor: Colors.grey[100]!,
    direction: ShimmerDirection.leftToRight,
    effect: ShimmerEffect.classic,
    angle: 45,
  );

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    // Simulate data loading
    Future.delayed(const Duration(seconds: 5), () {
      setState(() {
        _isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Silver Shimmer Example')),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15),
                ),
                elevation: 5,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.vertical(top: Radius.circular(15)),
                      child: Container(
                        height: 150,
                        width: double.infinity,
                        color: Colors.grey[300],
                        child: _isLoading
                            ? null
                            : Image.network(
                          'https://source.unsplash.com/300x200/?nature',
                          fit: BoxFit.cover,
                        ),
                      ).shimmer(shimmer: _isLoading),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'Beautiful Nature View',
                            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                          ).shimmer(shimmer: _isLoading),
                          const SizedBox(height: 10),
                          Text(
                            'This is a sample description of the card content.',
                            style: TextStyle(color: Colors.grey[600]),
                          ).shimmer(shimmer: _isLoading),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Available Shimmer Directions ShimmerDirection.leftToRight ShimmerDirection.topToBottom ShimmerDirection.diagonal

Available Shimmer Effects ShimmerEffect.classic ShimmerEffect.wave ShimmerEffect.pulse

silver_shimmer 0.0.9⧉