Flutter — Formula One Paging Animation

The finished product

It’s been a while since I did one of these. As a big F1 fan, when I saw this awesome Dribbble by Pontus Wellgraf, I had to try and make it in Flutter.

Imagery

Paging

With the ListView is was able to set the image size to 2 screen widths by setting the Image‘s width property to:MediaQuery.of(context).size.width*2.

Of course the ListView scrollDirection is also set to Axis.horizontal.

So now I can scroll the photos, but need to make them snap into place, enter ScrollPhysics.

To cut a long story short, I needed to snap to every second page. The easiest way I found was to copy the PageScrollPhysics class and make a couple of adjustments. See F1ScrollPhysics in the repo. Once that was applied the pages snap correctly and all is well.

Animation

The first part is figuring out how far we have scrolled, from which driver and to which driver. To do that I added a ScrollController to the ListView. Adding a listener gives us updates every time the ListView scrolls.

As we are scrolling 2 pages at a time, some maths is required to know where we are:

_scrollController.offset / (MediaQuery.of(context).size.width * 2)

This will give us a fractional position of where we are, so 0.5 is half way between item 0 and item 1.

Changing the driver number

We need to get the last driver number and the next driver number. To do this I used floor and ceil on the pageFraction. Once we have these we can then use pageFraction%1 to know how far between we need to be, and calculate with:

lastDriverNumber-((lastDriverNumber-nextDriverNumber)*currentFraction).round()

Applying this to State, gives us the required effect. The number changes as we scroll.

Changing the rest

First I created a string with all characters (only used the English alphabet, sorry Mr Räikkönen). All chars in upper case, lower case, and a space. This was enough for the proof of concept. Obviously more would be needed in reality.

I used the same calculations as the driver number, then found the characters between using this string and the fraction. See the _calculateCharacters in the repo for more details.

The Repo

The End

--

--

Flutter Fan Boy & Android Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store