Background Parallax animation in Flutter 🪄

Abdul Rehman
3 min readNov 20, 2022

We will create stunning parallax animation for our Flutter project.

In this article, we will implement a simple utility widget which will add parallax effect on top of any widget.

Create Base Widget ⚙️

Let create our base widget on which we will add parallax animation. In our BaseWidget we will add an image from assets directory. Later, We will add parallax effect to this image.

Create Parallax Widget 🎨

Now we will create a utility widget which will add parallax effect to our above BaseWidget. This will be StatefulWidget that will take a child widget as constructor parameter.

Now we will increase the width of the child widget. For this, we will first determine the width of the child widget. We will add GlobalKeyto the child widget, and using that key will fetch the width of the widget.

Here we have added StackWidget and then added child widget inside it. Now we will increase the width of our child widget to achieve parallax effect across that width.

We have increased the width of widget by 20% you can change according to your needs. We have also calculated the animation position parameters (rightPosition, maxEndPosition, maxStartPosition) using the new width. This new parameters will be used in the next step to add animation.

Add Animation 🦋

We will use AnimatedPositioned to create beautiful parallax animation. We will create a Timer which will continuously change the position of our child widget to create parallax effect.

Use Parallax Animation 🏁

We have implemented ParallaxAnimationWidget. Now we just need to add it to our BaseWidget to see the magic.

Voilà…!!! You have successfully added parallax animation to your Flutter project. You can use this widget anywhere in your project to create a stunning UI.

Thank you, and I hope this article helped you in some way. If you like the post, please support the article by sharing it. Have a nice day!👋

I am an mobile enthusiast 📱. My expertise is in Flutter and Android development, with more than 5 years of experience in the industry.

I would love to write technical blogs for you. Writing blogs and helping people is what I crave for 😊 .You can contact me at my email(abdulrehman0796@gmail.com) for any collaboration 👋

🔗 LinkedIn: https://www.linkedin.com/in/abdul-rehman-khilji/

--

--

Abdul Rehman

Mobile developer in love with Flutter and Android ♥️