Complex Animations in Flutter

Production Across Platforms

Flutter speeds up the development of apps and reduces the cost and complexity of app production across platforms. One of the reasons standing behind that is the possibility to share the single codebase across different platforms like Android, iOS, Web, Desktop, etc.

We can divide the codebase into two main parts:

• Views - responsible for displaying content
• Business logic - part of the program that encodes the real-world business rules that determine how data can be created, stored, and changed

It’s straightforward that the whole Business logic should be the same on every platform. 

When it comes to Views - we can still choose to implement different app layouts for iOS and Android. Yet the trend is that app layouts and designs are evolving to be more brand-driven and unified across platforms.
Here comes the Flutter with all its magic. Flutter ships with plenty of high-quality widgets, layouts, and themes that developers can use to speed up the whole creation process. Of course, there are some cases in which a desirable kind of view doesn’t exist, but Flutter is designed to make it easy to create your own widgets or even customize the existing widgets.

Custom Flutter Widget

A great example of custom widgets made in Flutter is the Placement Wheel developed for one of our clients. Despite the fact that the widget is quite complicated, we were able to develop a user-friendly, smooth running view within a reasonable time.

Our case was to develop an application that supports commercial turkey growers which own many barns. We were supporting a process called the placement which consists of taking mature turkeys from particular barns and placing a new group of birds in empty ones. There are a few dates related to the placement:

• Brood - date of eggs insertion
• Maturity dates - dates when male and female turkeys reach maturity.

Our solution to that problem was to create a custom Flutter widget called Placement Wheel which is a kind of calendar. The whole view is built from a circle with a rim that represents different dates which are important for turkey growers. We can divide it into a few parts:

• Information about months (placed at the top of the rim)
• Information about days in a particular month - represented by lines and numbers below months names
• Information about the number of weeks of the current year - marked as dark grey points below days numbers
• A green arrow points the day of placement 
• A black arrow represents the date of brood
• Red and blue arrows represent the maturity dates for both genders.

Creating User Interfaces

Interaction with Placement Wheel is quite simple - arrows are static, and the whole wheel view moves together with a user’s finger which creates a simple way to manipulate the placement date as well as other related dates.

What’s under the hood? The widget uses the CustomPainter widget which allows drawing any shape we want (e.g. lines, circles, rectangles). Placement Wheel elements are being calculated with trigonometric functions and linear transformations. All labels and numbers are generated using TextPainter and interactions with users are detected by GestureDetector.

Although Flutter isn’t only the framework for creating simple User Interfaces using widgets available out of the box, it gives a possibility to create more advanced views in an easy way. The Placement Wheel is a great example of such an interface. If you want to try it on your mobile phone for free and without registration, you can download KedziaApp from the store.