Flutter: Swipe page view/ slides with animated text

As a beginner in flutter, I found that there are a lot of tutorials about page view, page transformer, build in parallal-x. Here I will discuss, how to develop page view/ swipe slides with text which animated with the swipe.

Please kindly note that this article assumes that you have basic knowledge of flutter.

For this tutorial, I have referred to transformer_page_view , reflecty_slide_show, and page_transformer (all the credits goes to the authors of “reflectly slide show” and “page_transformer”)

So let’s get started.

First, create your flutter app and, delete all the unwanted codes, and change your main.dart file as following.

And create home.dart file in your lib/ folder and change as following.

Then create another file called page_transformer.dart in /lib folder and change it as follows.

Please note that this page_transformer.dart file was referred from page_transformer.

And then create a folder called jsn_data under /lib folder and create a file called visit_places.dart and change it as follows. (these file names and folder names can be any other names as you like)

Here, the class VisitPlaces, an array of JSON objects will parse into a List.

Please note that these values can be anything, and I have used those as an example.

And then create another file called main_home_slides.dart in /lib folder and change it as follows.

first, we get our json object values and parse those into a list called “placestovisit”.

In Container widget by changing the value of height, we can change the height of the slide/page view.

We call for _buildStoryPage inside PageTransformer, with currentIndex (current index of the slide), active (is current index is equal to the current page or not) and pageVisibility.

In AnimatedContainer _buildStoryPage, we check the active slide and change the properties of it.

Here, if the slide is not the current slide, it will be positioned a little bit lower from the current slide.

For the text-transform, In,

final double xTranslation = pageVisibility.pagePosition * 1000;

1000 is the translationFactor ( This value can be changed according to your requirement), and xTranslation is changed according to page visibility and translationFactor .

The transform of the text is happening according to the Matrix4.translationValues.

That’s All!!!

you can find the Github project via:

https://github.com/prabhashibuddhima/sldanimate

Thanks for reading this article! if you have any questions, feel free to comment down.

Cheers!!