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:
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.
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:
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:
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.