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 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 it’s magic. Flutter ships with plenty of high-quality widgets, layouts, and themes which 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 new group of birds in empty ones. There are 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 which 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 week of the current year - marked as dark grey points below days numbers
  • A green arrow which points the day of placement 
  • A black arrow which represents the date of brood
  • Red and blue arrows which 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 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.

Authors

Damian

LeanCode

Mobile Flutter Developer

Rafał

LeanCode

Mobile Team Leader
logo

We build communities

Technology

Flutter

Related services

IT Consulting

Mobile Apps

We start in simple 3 steps

step_icon

4h long workshop

During 4h we analyze the problem, assess solution and create the product roadmap.
step_icon

Proof of concept

Within next 3 days we prepare the technical proof of concept to check if it fits business.
step_icon

Recommendation

After the POC is accomplished we prepare the recommendation on how to implement the product with the offer.

Request the 5-STARS workshop

Discover new ways to build digital product that solves real life problems in just 4h
or send us your brief at hello@leancode.pl