Animated shimmer - A simple & lightweight widget to display an animated shimmer effect

Overview

Animated Shimmer

pub package Libraries.io dependency status for latest release License

Supports Null Safety

A simple & lightweight widget to display an animated shimmer effect.

Making a skeleton of a widget with shimmer effect while loading data from server or any other source is a common task that can be easily done with AnimatedShimmer widget. AnimatedShimmer is a simple yet very useful Widget that developers can use it to create an awesome animated shimmer effect for any widget skeleton loading.

Examples

An example can be found in the example directory of this repository.

More examples will be added soon!

Loading List

How to use

Add animated_shimmer to pubspec.yaml of your project:

dependencies:
  animated_shimmer: ^1.0.0

Import it in your Dart code:

import 'package:animated_shimmer/animated_shimmer.dart';

Declare AnimatedShimmer widget with required height and width:

  AnimatedShimmer(
    height: 10,
    width: 120,
  ),

A number of parameters can be passed to customise the look and feel of this animation:

  AnimatedShimmer(
    height: 10,
    width: 120,
    borderRadius: const BorderRadius.all(Radius.circular(16)),
    delayInMilliSeconds: Duration(milliseconds: index * 500),
  ),

To create round AnimaiedShimmer :

  AnimatedShimmer.round(
    size: 50,
  ),

Parameters:

  • @required height : accepts a double to set height of the shimmer effect
  • @required width : accepts a double to set width of the shimmer effect
  • startColor : accepts a Color and sets the start color of the shimmer effect from which animation will start
  • endColor : accepts a Color and sets the end color of the shimmer effect to which animation will end
  • borderRadius : accepts a borderRadius and sets the border radius of the animated shimmer widget
  • delayInMilliSeconds : accepts a Duration that would be the delay in starting the animation. Default value is Duration(milliseconds: 0)

A detailed API Reference can be found on pub.dev

License

MIT License.

You might also like...

Flutter Faux Self App Naked Eye 3D Effect

Flutter Faux Self App Naked Eye 3D Effect

Flutter Faux Self App Naked Eye 3D Effect

Jan 9, 2023

A custom navigation bar with bubble click effect in Flutter

A custom navigation bar with bubble click effect in Flutter

custom_navigation_bar A custom navigation bar with bubble click effect. Overview This project is inspired by this post from Dribbble and The Boring Fl

Jan 2, 2023

Flutter remote control - The main use of LongPressDraggable and DragTarget to achieve the universal remote control interaction effect.

Flutter remote control - The main use of LongPressDraggable and DragTarget to achieve the universal remote control interaction effect.

Flutter remote control - The main use of LongPressDraggable and DragTarget to achieve the universal remote control interaction effect.

Jan 2, 2023

Gyroscope-based Parallax Effect

sensor_image_demo A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you starte

Jan 4, 2023

A Flutter plugin to apply a gyroscope-based motion effect to widgets.

A Flutter plugin to apply a gyroscope-based motion effect to widgets.

Motion for Flutter widgets This package adds a new Motion widget that applies a gyroscope-based effect to Flutter widgets. On desktop or when the gyro

Dec 29, 2022

Add a fading effect when the user can scroll.

Add a fading effect when the user can scroll. Demo Quickstart Add the dependency to fading_scroll to your pubspec.yaml file. flutter pub add clickup_f

Dec 14, 2022

This is a view pager provides carousel effect and dismissal animation when page was removed.

This is a view pager provides carousel effect and dismissal animation when page was removed.

This is a view pager provides carousel effect and dismissal animation when page was removed. Features Carousel effect Horizontal Vertical Dismissal an

Dec 22, 2022

Hero Effect for common words of two Text (Flutter)

Hero Effect for common words of two Text (Flutter)

Hero Effect for common words of text widget (something like magic move in keynote) Features Usage Usage is easily and likes Hero,but obviously the chi

Oct 12, 2022

Flutter plugin to display a popup menu button widget with handsome design and easy to use.

Flutter plugin to display a popup menu button widget with handsome design and easy to use.

menu_button Flutter widget to display a popup menu button very simply and easily customizable. Resources Documentation Pub Package GitHub Repository I

Sep 27, 2022
Owner
Shubham Soni
A 🔥 flutter developer from India 🌟
Shubham Soni
A package provides an easy way to add shimmer effect in Flutter project

flutter_shimmer_widget A package provides an easy way to add shimmer effect in Flutter project Getting Started Animation Example Project There is a ex

Le Anh Tuan 4 Jun 29, 2022
The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery.

KenBurns The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. First add to your dependencies: dep

Favour Olukayode 1 Apr 28, 2022
In this project, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your own parallax effect without using external libraries.

Travel App UI In this part, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your ow

DebugErrorX 5 Dec 5, 2022
Flutter ticket pass - A Flutter Widget to display the details of a ticket/pass purchased by customers and display the details of the purchase

ticket_pass_package A Flutter package to display the purchase of a ticket/pass along with additional details such as list of buyers. The source code i

null 40 Aug 13, 2022
Display images flutter - Simple app to display images in flutter

Display Images In Flutter Simple app to display images in a flutter. In this dem

Manish Ahire 1 Jan 29, 2022
Drop shadow effect for any widget in Flutter

DropShadow Drop shadow effect for any widget in flutter Parameters Widget child; // required double blurRadius; // default: 10.0 double borderRadius;

null 10 Nov 26, 2022
Flutter plugin to display a simple steps indicator line widget

steps_indicator A simple steps indicator widget Installation Add steps_indicator: ^1.3.0 in your pubspec.yaml dependencies. And import it: import 'pac

Hugo EXTRAT 49 Oct 18, 2022
Easy to use, reliable and lightweight gesture detector for Flutter apps, exposing simple API for basic gestures

Simple Gesture Detector Easy to use, reliable and lightweight gesture detector for Flutter apps. Exposes simple API to react to basic gestures. Featur

Aleksander Woźniak 26 Nov 4, 2022
Acronym - A simple, lightweight and easy to use package to generate acronyms

A simple, lightweight and easy to use package to generate acronyms. Usage You ca

jxstxn__ 4 Jan 20, 2022
Bottom navigation bar with sliding clip effect.

Sliding Clipped Nav Bar Design Credit Toolbar icons animation by Cuberto How to use? API reference barItems → List<BarItem> List of bar items that sho

Watery Desert 55 Dec 3, 2022