Creating Scroll Animations in Flutter

Creating Scroll Animations in FlutterBuild smooth scrolling animations from scratch with FlutterKenneth ReillyBlockedUnblockFollowFollowingJul 5Screen recording of the demo app in actionIntroductionIn this article, we’ll look at how to create custom scroll animations from scratch using the Flutter SDK.

Flutter is a powerful tool for creating native mobile applications that run great, and it allows an incredible amount of flexibility in creating rich user experiences (such as animations).

If you don’t have a Flutter environment, head over to the installation page.

The source code for the example project in this article is available here.

Getting StartedFor this demo, I created a default Flutter project using flutter create and used only classes available directly within Flutter, with no dependencies added to the project.

In many cases, a task (such as a custom animation) can be accomplished directly, without the need of additional libraries.

The basic idea of this example app is to create a simple list view with a few items, and as the view is scrolled up or down, make a gear spin clockwise / counterclockwise in the background.

We’ll accomplish this by taking the scroll controller used for the list view and passing it to an animated background, which builds a custom widget that rotates in sync with the scroll position.

Application Entry PointWe’ll start with the main application file, lib/main.

dart:In the main.

dart file, there are imports for the following components:demo-card.

dart (builds a Card widget from an Item)items.

dart (defines Item class and mock content for demo app)animated-bg.

dart (builds the animated background widget)The main app class (AnimationDemo) sets up a basic app that wraps the default home page widget (MyHomePage).

Within the MyHomePage class there is a _controller property, which is initialized to a new instance of the ScrollController class to later be passed into both the AnimatedBackground (which drives the gear rotation animation in the background) and the ListView (which renders the scrolling list of demo items).

There is also a _cards property which begins with the list of Item objects imported from items.

dart and returns a list of DemoCard widgets to render in the ListView.

The Item ClassThe first imported file we’ll check out is lib/items.

dart:The Item class provides a data structure that will be passed along to instances of DemoCard to be rendered in the ListView.

There’s not much to it other than the name, description (which is currently unused in the demo), color, and the Icon to render for each item.

A list of Item objects will serve as a list of simple content to render within the ListView.

The DemoCard ClassThe next file up for inspection is lib/demo-card.

dart:The DemoCard class receives an Item in its constructor and returns a Card widget that renders Text and Icon elements that display the name and icon defined for each item.

Some basic styling is applied using Shadow, TextStyle, and RoundedRectangleBorder, along with the card’s elevation (set to 3).

Column and Row widgets are used to span child elements across the card.

The AnimatedBackground ClassSaving the best for last, let’s check out lib/animated-bg.

dart:At the top of the file, the dart:math library is imported to gain access to the π constant for doing the rotational transform calculation for the spinning gear.

The AnimatedBackground class constructor takes the ScrollController that will drive the rotation.

The _offset property will return either the controller offset if the controller has clients (i.

e.

the controller is properly initialized and hooked up to an actual scrolling element like the ListView) or it will simply return zero.

The build method returns an AnimatedBuilder that takes the controller (which is used as a Listenable to re-draw itself on scroll events) and builds an OverflowBox that is aligned to place the gear just off-screen.

The values 4 and 3 place the gear in the bottom-left corner of the tested device, the iPhone Xʀ simulator.

In practice, the Alignment values should be calculated from device screen height and width, to give precise values that will place the gear in the desired location (bottom-left corner, centered off to the side, etc) on any device, but for this example we’ll keep it simple.

Last up is the good part, where the animation itself takes place, within the rotate static method of the Transform class.

This class takes an angle and a child, and rotates the child by the angle as expected.

For this demo, I wanted the gear to move slowly and feel more in mesh with the scroll physics instead of the crazy freewheel effect that it had with a 1:1 value, and I wanted the gear to scroll counter-clockwise as though it were physically driving the list, so I multipled the offset by math.

pi and then divided that product by -1024.

ConclusionThis article and example project demonstrate just some of the capabilities that Flutter provides for creating custom animated user experiences.

Using only a few basic classes and simple math, we have a complete animation that adds a much more interesting element to something boring (like a settings screen).

These concepts can be extended to create splash screens, loading animations, page transitions, notification effects, or anything else imaginable.

Nearly anything that takes a double as an argument can be animated, which leads to straightforward implementation of effects such as the rotation employed in this example, along with opacity, position, and many other properties.

Thanks for reading and good luck with your next Flutter project!Kenneth Reilly (8_bit_hacker) is the CTO of The Innovation Group, an R&D firm that specializes in solving challenging technical problems and assisting others with mastering the tools of tomorrow and putting them into production today.

.

. More details

Leave a Reply