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.

Placement Wheel

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.

Authors

Damian
LeanCode
Mobile Flutter Developer
Rafał
LeanCode
Mobile Team Leader

Read more

There is always exciting technology our team wants to try out. We challenged them and asked for proof on how Flutter can bring value to the client. We are sharing the insights after making the first 10 commercial apps within the last 24 months during which we’ve spent some 17.193,00 hours on Flutter projects.
Four mobile phones with small icons
Firestore and Firebase suite are great technologies. They allow developers to build some features in Flutter and other mobile frameworks really fast. However, Firestore has also many pain points that outweigh the pros in most of the more advanced cases. Is Firestore appropriate for you? Read on to find out why!
Image tile
logo

We build communities

A photo from Flutter Warsaw event
Flutter Warsaw is an IT community focused on modern Flutter technology. It is one of the largest so-called meetups dedicated to Flutter in Europe, initiated by LeanCode in 2018 in Warsaw, Poland with over 1.8k members worldwide. It gathers Flutter enthusiasts and other IT professionals interested in getting to know its possibilities.
A photo from Flutter Europe conference
Flutter Europe is an initiative driven by European Flutter Communities to gather people passionate about Flutter and those who want to learn how to create beautiful applications. Its last edition, one of the biggest Flutter conferences, took place in 2020 in Warsaw, Poland. It was organized to share Flutter's knowledge further.