We've been looking at Google’s mobile app development framework Flutter for a while and wanted to get our hands on it to confirm the rumours of fast development time, excellent support for animations and easy to create, customised UIs. We built a prototype app to test out what we'd heard, and here's what we learned.
We’ve been developing an original financial product concept for a number of months with one of our partner agencies which suited our prototype well. We decided to build a (relatively) functionally simple app with a clean, contemporary UI and see how developing with Flutter impacted the ease with which we could both build the app quickly and polish it with slick animations.
It did live up to its fast development time
With only 25 developer days in total budgeted for our prototype, we needed Flutter to live up to its speedy reputation. While developing with Flutter was quick to pick up and develop with in general, two of the features Google built into Flutter left a significant lasting impact; hot reload and hot restart. These allow developers to see code changes without the need for a full rebuild of the application. This removed a lot of the friction we didn’t realise we were encountering in app development and allowed us to absorb feedback and iterate on designs quickly.
Customised UIs are more straightforward in Flutter
Many of the apps we build require customised UI; this can range from simple style changes to complex custom control development. Flutter draws everything as widgets on screen, whereas in conventional UI toolkits UI controls are more complex. We took advantage of this and created both a custom control that would have been more difficult in traditional UI development methods and applied an app-wide style to unify component styles within the app. This cut the time required to build views, and allowed us a much finer degree of control within a much condensed timeframe.
Flutter offers great animation support
A key stretch goal of ours was to include smooth animations within the prototype, and with work on the UI progressing so well we used the time saved to explore how these could work. We found Flutter really does excel at animation; it has built-in animations such as [Hero] and [AnimatedContainer] and allows for full control on custom animations, i.e., explicit animations. We managed to drop in a lot of the built-in, implicit animations, making the app feel more interactive without negatively impacting the user experience, and created custom animations with great ease due to the APIs offered in Flutter. This is a huge improvement over the comparatively cumbersome alternatives in native development. While it wasn’t quite as smooth as some of the Flutter hype promised, it would still allow us to use animation to elevate the user experience to a much greater degree than native development within a comparable budget.
It still allows for great performance
Great user experiences and fast development times are great but the app still needed to meet our standards of performance. Flutter's claim is that it aims to provide 60 fps performance or 120 fps on devices capable of this refresh rate. We’re glad to report that once our UI and animation elements were included, our prototype's UI was very smooth and the app met performance standards without any code modifications, a great validation of Flutter’s claims. It’s also worth noting that if we had run into problems, Flutter has a suite of performance profiling tools that we could have used to diagnose the issue.
Ticking enterprise boxes
We develop a lot of line-of-business and enterprise apps within our studios, so while a beautiful UI and great user experience are always a must for us, Flutter still had to be suitable for connecting into broader tech ecosystems. While our opportunities to test this within our standalone prototype were limited, we were easily able to build in BLE integrations for physical product control, and our initial assessment of working with Flutter over the course of this project is that it would indeed be suitable for enterprise work.
The verdict: fantastic developer and user experiences
We set out to test the speed of development and UI limitations of Flutter, and were very impressed with what we found. In particular Flutter is great at getting the exact design you want in your app and adding engaging animations to make your app come alive. Flutter’s hot reload and restart features were another huge plus, drastically shortening the feedback and amend loop and allowing for changes to be actions quickly without disrupting the development process. To be honest the only real limitations we encountered were the limitations of our imagination in adding more new and exciting ideas to the UI. Flutter is a no brainer for anyone who is considering launching a new app project with a bang!
We’re very excited by the outcomes of our prototype development; it’s rare for a new development tool to live up to its hype, and the benefits we’ve found echo those of Flutter’s rapidly growing developer community. If you’re planning a new mobile project or are looking to understand more about the benefits of using Flutter, get in touch and we’d love to share more of our findings.
Iain
Mobile Developer