Add Parallax Animation To Your Flutter App Using VelocityX and Sensor Plus

Learn A New Way To Use Tween Animations In Flutter

Everyone knows that parallax animations look cool and are really fun, but not everyone knows how difficult it is to actually apply it to apps. In this article I will be showing you a quick and easier way to add it to your Flutter apps using the TweenAnimationBuilder widget, transform widget and 2 handy packages.

Parallax effect made using Flutter, VelocityX and Sensor_Plus

First things first, what will we be needing in order to carry this out:

1. Flutter (of course)
2. VelocityX Flutter Package (not compulsory but helps a lot)
3. Sensor_Plus Flutter Package (very important)
4. And last but not least a little bit of knowledge using builder widgets in Flutter

TweenAnimationBuilder class - widgets library - Dart API

Let’s Get Started

Ok! Now that you’ve skimmed through the TweenAnimationBuilder documentation you should have a basic understanding of it. I encourage you to do a quick read of the Sensor_Plus package documentation and the VelocityX documentation as well, as they will help you in the future.

In order to get started with this make sure that you already have a Flutter app that you want to add this to or simply run flutter create app-name in your terminal.

First you’ll need to head over to the pubspec.yaml file and install the packages that I mentioned earlier (velocityx and sensor_plus).

Once that’s done the second thing that you’ll do is go into your app-name/lib directory and open up main.dart. In here you’ll see a lot of generated code, you can leave it for now and just create another .dart file in app-name/lib that will house the Parallax animation widget. You can name this file whatever you’d like.

Now Let’s Get Into Coding

Once you open this file in your code editor you can go ahead and create stateful widget or use the stfl — stateful widget generator code snippet that comes with the Flutter VSCode extension. You should have something like this

https://medium.com/media/0f463b832533235c9246a6036f943b33/href

Alright now that you’ve generated a basic stateful widget it’s time to modify a few things. Firstly let’s add the TickerProviderStateMixin to the _MyWidgetState class.

https://medium.com/media/3582a3d93a14657f47b526a5ac5220a8/href

With this you will be ready to produce as many 60 frames per second animations as you’d like. And do endeavor to read the comments in the code as the code will be explained in the comments much more than in the article.

Getting the values out of the way

Here, we’ll be defining variables to hold the angular values that we will receive from the Sensor_Plus package.

https://medium.com/media/3582a3d93a14657f47b526a5ac5220a8/href

Ok, so as the comments have already explained the values that have angle in them are used to store the data that we will receive from the accelerometerEvents.listen method. The streamsub value on the other hand will be used as an array of stream subscriptions. The StreamSubscription class here is used to properly type the array letting flutter know that this is an array of StreamSubscription objects. Whenever you use the .listen method on a stream the object returned is a StreamSubscription object. More on StreamSubscription below.

StreamSubscription class - dart:async library - Dart API

We made the build function return a Column widget because of the error that will appear if there is nothing returned.

Now let’s call void initState and void dispose so that we can initialize our accelerometerEvents.listen. We will also be changing the state of the xAngle, prevXAngle, yAngle, prevYAngle, zAngle, and prevZAngle variables in the .listen() callback function. Let’s go 👇

https://medium.com/media/3582a3d93a14657f47b526a5ac5220a8/href

We make use of the initState and dispose functions in order to, respectively, subscribe and cancel subscriptions to the stream.

Notice that in the streamsub.add method we’re adding accelerometerEvents.listen() to our array of stream subscriptions. Inside the listen method we have a function that gives us the realtime value of the accelerometer events. The event object has 3 values: x, y and z. Make sure that you set the state of what the previous Angle values will be before setting the new state of the Angle values, this will be very important for what comes next.

Time To Animate

Now that the values are updating in realtime we can start making use of them using the flutter widget called *TweenAnimationBuilder *. We will be making use of the Column widget that we added earlier, of course you can make use of any container like widget you want but I’m making use of Column in case I would like to add anything after the widget. Alright, let’s get into it

https://medium.com/media/3582a3d93a14657f47b526a5ac5220a8/href

In the code snippet above, we make use of 2 TweenAnimationBuilder widgets. This is because we will be animating the values of 2 axes, first the X, then the Y. The way that we will be doing this is through the Transform widget. You might be wondering why we are using the zAngle value if we’re going to be animating the Y axis. Well this is because of the way you move your device in 3D space, making use of the zAngle for this produces the best results. As you will see later, the values being parsed to the rotateX and rotateY Matrix4.indentity() methods, will seem a bit mismatched. Ok, now let’s see the values being used in action

https://medium.com/media/3582a3d93a14657f47b526a5ac5220a8/href

• *1. Here we passed in the negative of the animated zValue provided by the TweenAnimationBuilder . You will probably be asking why is it negative, like I said earlier it is because of the way you move your device in 3D space. In translates in a much more desired way as if we were to use the positive zValue or make a yValue.
• *2. Here we passed in xValue. Yes, not the negative just the positive xValue.

I’m sure you’re interested in knowing why these values are divided by 10. It’s because if they are not divided by 10 the parallax motion would be too much event if the device is turned slightly.

• *3. We made use of the xValue and zValue here and multiplied them by 8 in order to get a better shadow effect for the parallax card.

With this we are done with the Parallax animation and we can now see it in acton in our app. All we need to do is add this widget to our main.dart file as a widget. Like so

https://medium.com/media/4448338978a34173350d85c041f4de50/href

To get your main.dart file looking like this just make sure to get rid of all the boilerplate that is comes along with it when you generated the app earlier. Replace NameOfParallaxWidget() with whatever you named the parallax widget you made.

Conclusion

Now you should have something like this when you run your flutter app

And there you go you have a parallax animation. You can apply this method to any widget that you would like to animate by just changing the VxBox widget to another widget you would like to animate. You can even use it on text but it would be best to use it on the texts container instead 😅.

Here’s the link to my repo

flutter-test/parallaxnft_widget.dart at master · michaelessiet/flutter-test

I hope this article helped you out. If it did why not leave a clap 👏 and share 😁.

If you would like to add to the repo feel free to leave a PR or fork and experiment with it . If I got anything wrong don’t be shy to let me know in the comments. I’m always looking for a way to improve.

Thanks for reading ❤️ have a great time playing around with Flutter.

Pull To Refresh Or Search Using Flutter

Check out some of my other articles 👆

---