maddyb99 / shimmer_animation Goto Github PK

View Code? Open in Web Editor NEW

36.0 1.0 13.0 10.3 MB

This shimmer animation widget can help you bring simple yet beautiful skeleton loaders to your flutter app with ease.

Home Page: https://pub.dev/packages/shimmer_animation

License: MIT License

Dart 91.52% Java 1.08% Objective-C 5.88% HTML 1.52%

animation pubsub flutter flutterwidgets dart flutterpackage flutter-package flutter-packages flutter-ui hacktoberfest

shimmer_animation's Introduction

Shimmer Animation

Supports Null Safety

This shimmer animation widget can help you bring simple yet beautiful skeleton loaders to your project with ease.

Shimmer is very widely used as the default animation for skeleton loaders or placeholder widgets throughout the development community. Therefore, having an easy to use, yet customizable widget ready to use for Android, iOS and Web, gives developers an advantage to focus on their actual functionality, let shimmer make the loading experience smoother.

Examples

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

A list of detailed examples can be found in this Examples Repository

Full Screen	Loading Widgets	Loading Buttons

How to use

Add shimmer_animation to pubspec.yaml of your project:

dependencies:
  shimmer_animation: ^2.1.0

Import it in your Dart code:

import 'package:shimmer_animation/shimmer_animation.dart';

Wrap any widget with Shimmer() widget to apply animaton:

  Shimmer(
    child: Container(
      color: Colors.deepPurple,
    ),
  ),

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

  Shimmer(
    duration: Duration(seconds: 3), //Default value
    interval: Duration(seconds: 5), //Default value: Duration(seconds: 0)
    color: Colors.white, //Default value
    colorOpacity: 0, //Default value
    enabled: true, //Default value
    direction: ShimmerDirection.fromLTRB(),  //Default Value
    child: Container(
      color: Colors.deepPurple,
    ),
  ),

Parameters:

@required child : accepts a child Widget over which the animation is to be displayed
color : accepts a parameter of type Color and sets the color of the animation overlay. Default value is Colors.white
color : accepts a parameter of type double and sets the Opacity of the color of the animation overlay. Default value is 0.3
enabled : accepts a bool which toggles the animation on/off. Default value is true
duration : accepts a Duration that would be the time period of animation. Default value is Duration(seconds: 3)
interval : accepts a Duration that would be the interval between the repeating animation. Default value is Duration(seconds: 0) i.e. no interval
direction : accepts a ShimmerDirection and aligns the animation accordingly. Default value is ShimmerDirection.fromLBRT()

A detailed API Reference can be found here.

License

MIT License.

shimmer_animation's People

Stargazers

Watchers

Forkers

k0shk0sh normancarcamo heyadrian12 roulljdh derrick56007 apalala-dev jxstxn1 shubhamhackz zhan2046 ayush412 learnflutter2 nezam10 22106331

shimmer_animation's Issues

Using new parameter 'interval' (v. 0.2.0) causes exception

When the widget is removed from the widget tree it still tries to animate, causing the following exception:

AnimationController methods should not be used after calling dispose.
#0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39)
#1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5)
#2      AnimationController.forward (package:flutter/src/animation/animation_controller.dart:456:7)
#3      _ShimmerAnimatorState.initState.<anonymous closure>.<anonymous closure> (package:shimmer_animation/src/shimmer_animator.dart:40:60)
 #4      new Future.delayed.<anonymous closure> (dart:async/future.dart:326:39)

In brief the internally used AnimationController has already been disposed (correctly) when the internal Future (used to delay the shimmer) tries to animate forward.

To reproduce the problem just create a basic app with a button to perform a Navigator.push to push a route, with a Page that use the Shimmer with the "interval" param, and then just press "back" or programmatically add a button to perform the Navigator.pop in order to remove the Shimmer widget from the widget-tree. Wait the 'interval' delay to see the exception.

More precise angles for the animation flow

The angle of the animation is currently selected based on one of the predefined 8 directions in the Alignment object. The proposal by @Kobatsu in #17 is to introduce custom angles in this.

There is an angle on the shimmer effect that we can tweak with predefined values, would it be possible to chose more precisely the angle instead of predefined values only?
I saw that it relies on the Alignment object so I guess it can be 🤔

Need to think over and implement this solution

Synchronize a group of shimmer animations

Hi,
The shimmer effect from this package is pretty cool, however I would like more control.
Here are a few things I thought:

Delay

In my home screen, I would like to highlight some parts of my app but not all at the same time, to let the user see them one after each other.
The interval will not do it for this use case since everything will start at the same time

More precise angle on the shimmer effect

There is an angle on the shimmer effect that we can tweak with predefined values, would it be possible to chose more precisely the angle instead of predefined values only?
I saw that it relies on the Alignment object so I guess it can be 🤔

Adding some randomness

This is more an open though than a feature request, but I wondered if you had an idea to make it less repetitive.
For instance, there could be an interval of 500 ms twice then one of 3 sec. Later, it might come back to an interval of 500 ms or something different.
I though about changing the interval value after some delay but I am not sure it will be really intuitive / smooth, and others might benefit from this feature if it was directly in the package.

I might do a PR for the delay and the angle, not sure about the randomness 🤔

Is there a way to clip the shimmer to the child below?

Not an issue.
Is there a way to clip the shimmer to the child below? The shimmer is overflowing. Like a Cupertinobutton with shimmer

Add Possibility to define custom Direction

Currently, the default animation moves from TopLeft to BottomRight.
Add the possibility to pass a parameter which defines a custom direction.

Not working in web

════════ Exception caught by scheduler library ═════════════════════════════════
UnimplementedError
═════════════════════════════════

Adapt intensity of shimmer?

Is there a way to increase the intensity of the shimmer?

Delay between shimmers

It would be useful to specify the delay duration between "shimmers": now you can only decide how much the "shimmer effect" takes from start to end, to make it more quick or slow, but there's no way to set the delay before starting a new shimmer.
So for example, imagine that I want to shimmer an item on the screen, every now and then, to bring user attention to a certain UI element. If I set the duration to 1 second the effect is good but really too frequent and anoying for the user. If I set it to 7 seconds this will bring the shimmer to be extremely slow, loosing the real intended effect behaviour.
A separate "shimmersDelay" param would be useful, in order to set the delay between the end of a shimmer and the start of a new one.

README: LICENSE details missing

Add LICENSE information in the README file for better clarity

Failing Widget Tests due to undisposed Timer

Describe the bug
If you use the Package and make WidgetTests with pumpAndSettle() you will receive an Error of an undisposed Timer.
This is caused due to the Future.delayed Method which is used.

To Reproduce
Steps to reproduce the behavior:

Use the Package to Create a Loading Card
Make a Widget Test to Test if N Objects of type Shimmer() are displayed
See failing tests due to an undisposed Timer

Expected behavior
I expected that the tests will pass.