SlimyCard Animation in Flutter

Updated 30 November 2023

Save

SlimyCard Animation in Flutter is just an animation that can be applied to the widgets in order to separate them into two parts.

It is basically used to create a Slime Like Animation.

Read more about the services provided by Mobikul on the Flutter app development services page.

Properties of SlimyCard

color – This property helps in changing the color of the Slimy Card as per the requirement.

width It specifies the width of the Slimy Card.

topCardWidget It takes a custom widget that we display in Top Card.

topCardHeight It helps to set the height of the Top Card in Animation.

bottomCardWidget It takes a custom widget that we want to display after animating.

bottomCardHeight It helps to set the height of the Bottom Card in Animation.

slimeEnabled – This property is set to true by default.

borderRadius – It specifies the border-radius for slimy cards.

Steps to Integrate SlimyCard Animation in Flutter

Step -1 -> Firstly, add the slimy_card dependency in the pubspec.yaml file.

We can check the updated version of the dependency from slimy_card.

Step – 2 -> Run ‘flutter pub get‘ command.

After this, we are ready to begin writing our code.

Code for SlimyCard Animation in Flutter

Here, is the code–

main.dart

slimy_card_top_widget.dart

slimy_card_bottom_widget.dart

While running the app, you may face issues like Cannot run with sound null safety

Don’t panic!!

It’s just that currently, the dependency does not support null safety so just have to run the command on your terminal on the root project¬†

We are good to go now.

Here’s the final output–

 
SlimyCard Animation in Flutter

Conclusion

In this blog, we have discussed how to create an amazing animation with the help of a dependency.

I hope it will help you understand and get a brief idea about it.

You can also check some of our other animation blogs – https://mobikul.com/liquid-swipe-animation-flutter/

https://mobikul.com/animations-in-flutter/

Thank you for reading!!

References

author
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home