rodrigobastosv / fancy-shimmer-image

Introduction

Package created for the purpose of uploading images from the internet, giving the possibility of showing a beautiful Shimmer animation while the images are not loading. And it is still possible to create a widget to be shown in case the image upload fails for some reason.

This package is basically a union of two known packages:

• Cached Network Image
• Shimmer

Basic Usage

You can use the package on the fly by simple passing a URL of an image to the FancyShimmerImage widget.

FancyShimmerImage(  
  imageUrl: 'https://images.unsplash.com/photo-1465572089651-8fde36c892dd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',  
),

That will produce a image that's is cacheable by default and that has a default (grey) Shimmer animation. Similar to result below:

More Advanced Usage

If you don't like the default widget behavior, you can set the background colors of the image, the color of the shimmer base effect, and the color of the highlighted effect.

FancyShimmerImage(  
  imageUrl: 'https://static.businessinsider.sg/2018/12/12/5c1c90f8e04d6243c7019cf6.png',  
  shimmerBaseColor: randomColor(),  
  shimmerHighlightColor: randomColor(),  
  shimmerBackColor: randomColor(),  
)

By randomizing the colors you can have a result similar to this:

Other thing you can do is to configure the direction of the Shimmer and it's speed. In the above example i configured it to have top to bottom direction and 300 milliseconds of speed.

One last step you can configure is to configure the widget that will appear in case the image upload fails for some reason. In this case just pass the desired widget in the errorWidget parameter. If no value is passed, a default error widget will be used.

FancyShimmerImage(  
  imageUrl: 'https://static.businessinsider.sg/2018/12/12/5c1c90f8e04d6243c7019cf6.png',  
  errorWidget: Image.network('https://i0.wp.com/www.dobitaobyte.com.br/wp-content/uploads/2016/02/no_image.png?ssl=1'),
)

fancy-shimmer-image's Issues

Cannot make shimmer shape circular

Tried using:
BoxDecoration & CircularAvtar

    Container(
      decoration: BoxDecoration(shape: BoxShape.circle),
      margin: EdgeInsets.all(12.0),
      child: FancyShimmerImage(
        imageUrl: business[index].imgUrl,
        height: 90.0,
        width: 90.0,
        boxFit: BoxFit.fitHeight,
      ),
    );

and almost all ways to make the widget circular but still cannot make shimmer circular.

Image not showing up

Hi,

I tried the example code and the shimmer works, but no image is displayed. I tried different image urls and still can't make it show up. Am I missing anything?

Thanks!

Add imageBuilder from CachedNetworkImage

Does it support svg?

[Feature Request]: Need a FancyImageProvider to add a photo to the container decorator

There are often times when you need to display some widget on top of an image, sometimes the only option is to use Stack, but Stack requires more computing resources to render widgets. It requires more than if we use a child-parent widget tree.

Therefore, in order to display an image, and it was not the final one in the widget tree, they often add the image to the container decorator, and in the child element of the container the necessary widgets are defined to be displayed on top of the image.

The package cached_network_image, which the fancy_shimmer_image package depends on, contains a CachedNetworkImageProvider, and I assume that it is possible to add a shimmer effect for the FancyImageProvider

[Feature Request]: Ability to specify blurhash and have that be set as the background while loading the image

Hi,

I am so grateful to your project as its been amazing but one thing I would love to see is the ability to take a blur hash and be able to have it be the background. There are packages like https://pub.dev/packages/flutter_blurhash and such that you could use to potentially pull this off. Thanks for your amazing package though

duration is not working

duration is not working

Criar exemplos separados com random e com default

Criar exemplos separados com random e com default

Adicionar algumas opções que o Shimmer tem

• Direção do shimmer
• Duration
• Etc

Getting error on image loading.

Error

E/SQLiteLog(19645): (1032) statement aborts at 12: [INSERT INTO cacheObject (url, key, relativePath, eTag, validTill, touched, length) VALUES (?, ?, ?, ?, ?, ?, ?)] attempt to write a readonly database

My code

FancyShimmerImage(
                    imageUrl: '$imgProfile',
                    errorWidget: Icon(
                      Icons.account_circle_rounded,
                      size: 100,
                      color: primaryVariant,
                    ),
                    boxFit: BoxFit.cover,
                  ),

Images in the readme file not visible

It shows up "enter image description here". It would be really helpful if you could place the GIF of the required result this package produces.

[Deprecated Version] : fancy_shimmer_image >=2.0.0 is forbidden for shimmer: ^3.0.0

Hy @rodrigobastosv,

When I was using this package I faced this issue saying the current version is deprecated, it seems like the newest version of Shimmer is ^3.0.0, and you are using ^2.0.0.

Because fancy_shimmer_image >=2.0.0 depends on shimmer ^2.0.0 and <project-name> depends on shimmer ^3.0.0, fancy_shimmer_image >=2.0.0 is forbidden.
So, because <project-name> depends on fancy_shimmer_image ^2.0.2, version solving failed.
pub get failed
command: "/home/sujith/flutter/bin/cache/dart-sdk/bin/dart __deprecated_pub --directory . get --example"
pub env: {
  "FLUTTER_ROOT": "/home/sujith/flutter",
  "PUB_ENVIRONMENT": "flutter_cli:get",
  "PUB_CACHE": "/home/sujith/.pub-cache",
}
exit code: 1

I can also help by contributing to this issue for fixing it...

Adicionar um widget padrão de erro mais bonito

Adicionar um widget padrão de erro mais bonito