Flutter: Drop Shadow Effect for Image.

look at those beatiful shadows ;)

Today we are going to look at how to achieve image drop shadow in Flutter.

Image Drop Shadow effect is basically a cool effect in which shadow of image depicts image in blurred format.

So lets get started…

1. First of all create a flutter project name it drop-shadow-example and delete all of the contents of the main.dart file in lib directory.
2. Now go to the pubspec.yaml file add under the dependency. `drop_shadow_image: ^0.9.1`
3. Create images dir and place a image inside with name “example”. Now add code for your asset for the image in the pubspec.yaml or You can also add image using network.
4. after adding asset in pubspec.yaml. the file will look like this…

pubspec.yaml should look like this

5. The drop_shadow_image comes with a Class DropShadowImage. The class have some properties which can be used to make the full potential of the package, let’s have look at these properties and then we will use it…

6. Now come to main.dart and lets write code below for the effect using the package we added.

for Image.asset():

main.dart should look like this

for Image.network:

main.dart should look like this

Results

Conclusion

Using drop_shadow_image You can apply drop shadow to image depicting image very easily with full performance. The package supports Android, IOS, MacOS, Windows, Linux and Web.

for the reference you can look at the the link to GitHub.

Thank You!