Why Flutter's mobile app is a good idea for business in 2020
In times of crisis, companies seek to reduce costs, accelerate market entry and increase online presence through applications. Flutter is recommended as one of the speediest mobile solutions. This emerging technology could improve your mobile app development process as well as reduce costs.
Flutter was launched by Google in May 2017. It is a free, open source cross-platform mobile development framework. It allows developers to build a native app for Android as well as IOS. Due to cross-platform and one code base feature, Flutter is becoming preferred choice for the developer community globally. Why is Flutter such a hot topic?
Cross-platform applications are an old dream of any business, because separate (native) applications for iOS and Android are much more expensive to develop and support. Flutter became the number one solution for retail, fintech and ecommerce.
Cross platform can be different
In simple terms, the cross-platform is a set of tools (framework) that allows you to create an application suitable immediately for iOS and Android. At first glance it sounds wonderful. In fact, each framework has its own capabilities and limitations. There are a lot of them: React Native, Xamarin, PhoneGap, Titanium, Ionic, Flutter - the most popular. An ideal cross-platform must meet two requirements: be economical in terms of development and provide a quality user experience.
Cost effectiveness. The benefit is not only in making one application instead of two. The value is also in catching the least problems when adapting to each of the platforms. If applications are simple, such problems are insignificant. Problems begin when the application is expanded by functions and inevitably gets complicated (any product at the development stage arrives to this point).
User experience. From the users perceive it is important that the cross-platform application is perceived as native - that is, as if it was written specifically for this platform. At a minimum, it should include smooth animations, interface elements typical for a given OS, and work with gestures. Indeed, Flutter has a convenient toolkit, the ease of creating animations and UI components that are not inferior to native applications in download speed. The technology is designed to work out microinteractions that create a sense of comfort and provide high-quality UX. Most of applications lack these features, except Flutter.
Why Flutter Development Is Cheaper
Flutter continues to bring benefits at the development stage: the team is smaller, the release cycles are easier and time-to-market is reduced. Thus, the product receives a significant head start in development and will potentially bring more money. You won’t save on management and business analytics.
If we look at the case of a small store, and try to evaluate the advantages of Flutter for the project without platform-dependent functions, it turns out that Flutter saves roughly 45% on development, 70% on QA and 30% on application design as compared to the native development.
“The DSR (Digital Successful Routine) application is an analytical system for managers and a team of KFC restaurant chains. Thanks to using Flutter, we were able to implement more functions within the budget. Even at the first version of the application, a separate interface was created for working with analytics and tasks for a group of restaurants. Cross-platform technology is new for us, but we did not regret it. UI and animations are implemented at a high level, users do not distinguish our Flutter application from the native one, everything works quickly”, says Eugene Nikitchuk, Business Partner, KFC
What products can be developed on Flutter?
Briefly, any. Now Flutter is widely used to create applications in Alibaba, Airbnb, Uber and other large companies. We believe that the framework is best suited for medium and large businesses. Using Flutter, you can create applications for:
- various retail (loyalty programs, catalog, online store);
- banks and fintech (work with small businesses);
- suppliers and franchisees;
- large business (contact centers, control of couriers, organization of internal processes).
Constructors and cross-platform Flutter
Constructors were created for those who need quick and anti-crisis solutions. Such software as Mobincube and Imshop.io allows you to make the application quickly and at the affordable cost. But they are not suitable for projects with complex integrations and business processes (for example, many options for placing an order) and where regular updates are planned.
The constructor is an excellent solution for a small restaurant, but it will be extremely inconvenient for an online store with hundreds of thousands of dollars in turnover per month. As far as the scalability is concerned, constructors are not an option. Constant custom upgrades according to individual requirements are no longer efficient in terms of the budget and time. The tendency nowadays is that large trading companies refuse to use boxed solutions and create their own mobile products. The market confirms that a quick decision cannot be permanent.
David DeRemer talks about how Flutter helped them to add new features easily to the Hamilton show application. “We wanted to develop an app to meet the needs of fans as we started to expand the brand. Hamilton's Flutter app launched in the App Store and the Play Store three months after we wrote our first line of code. We have very high expectations of quality for the apps that we build. We expect pixel-perfect results. And we need them to be very high performance. Flutter gave us a lot of opportunities that previously weren't available to us. The fact that it's a single code base drastically improved our ability to deliver a consistent experience across platforms. And since launch, Flutter's efficiency and speed has helped us to build new features, such as the recent trivia game. We're really excited because as the show continues to grow, we're going to be able to keep pace with a ton of new features that's going to make the app even better”, says David DeRemer.
Often the cross platform looks like a more advanced mobile version of the website in the application wrapper. Animations are slow, unusual interface elements with unpredictable behavior are used. This, in turn, aggravates the user experience and, consequently, ratings in the store and retention rate (an indicator of users’ revisit to the application) are lower. Such problems do not occur for Flutter. Animations are smooth and user-friendly native elements, which are familiar for the user, are applied.
“We knew that this app needed to be rock solid, both in terms of performance and visual fidelity, and really represent the amazing experience that the "Hamilton" show itself provides. And ultimately, that's why we decided to use Flutter”, says Jessica Wagner from Hamilton Musical. Hamilton Musical is a Flutter Mobile App where you can upload your music, videos, news, hashcode and manage them.
Native applications (written in the native OS languages - Swift and Kotlin, for iOS and Android, respectively) do not have serious drawbacks, but require significant development and support costs. You will have to create business logic, layout and interface, taking into account the characteristics of each platform. All this will affect the project budget.
Cross-platform application on Flutter has the advantages of native development and allows you to reuse most of the code between different platforms, which could save up to 40% of the budget. That is, in Flutter we save developers time not only by writing one code instead of two, but we also take many features out of the box, and the optimized process of working with animations is far more efficient as compared to native development.
Matthew Smith from the AppTree is talking about how they maximized the code sharing between mobile and the web thanks to Flutter. AppTree is an enterprise application that has enabled a common business functionality that help you manage your business systems like labor entry, audits, data collection, inspections, requests and workflow.
“But it's not the amount of code that you're sharing that really matters. It's what code you're sharing. And what we're sharing is the most mission-critical code. And it's where you'll find most of your bugs. And so it's also the code that is the most expensive to write. It takes your most senior engineers. And it's the most expensive to maintain. We develop all of our features on Flutter first because we can write it so fast, and testing is so fast… We are developing features at three times the speed we were before, for obvious reasons. We're not writing it three times. And this is a real number. Our features are of higher quality because we are testing better, we're all reviewing each others code, and we're all thinking about the problem in the same way. And we've reduced our QA time significantly. And probably the best thing about all this is that the three teams that we've had are now one big Flutter and web team”, says Matthew Smith.
The hot reload function, especially admired by programmers, collects an application from widgets in literally seconds. Depending on the complexity and identity of the project, all this adds up to 20-50% time savings.
Abin Baby, the co-founder of KlasterMe, a social media for content creators from Boston, MA, shares his experiences on hot reload feature. “Once you are past the steep learning curve Flutter almost works like magic. Abracadabra… there comes a navigation drawer. Hocus pocus…a hero animation. It is that easy and fun! Flutter widgets made the development simple, productive and fast. These widgets are so easily customisable that you can create effortlessly almost anything you can imagine. What is more, Flutter has a really enthusiastic and helpful community around Github, Stack Overflow, and Google groups. Also, I need to mention that they have insanely good documentation which made the on-boarding really, really easy. The Hot Reload feature also helped to speed up the app development processmaking it straightforward to experiment with the UI, and fix bugs in extremely short time”, says Abin.
“Flutter is the ideal prototyping platform. I once participated in a marathon, where a participant (data scientist without development experience) just took and assembled a prototype of the simplest application in a few hours. On Android, a similar development would take much longer” – says Stepan Goncharov, LYFT Software Development Engineer.
Native vs multiplatform vs reality
The choice of a framework depends on many factors, starting from the available resources and ending with the features of a particular application. Google’s Google’s website lists three key benefits of Flutter.
1. Native performance
- Most modern applications do not require complex logic. Server requests, file handling and platform APIs - all of this in Flutter is performed asynchronously and does not impair application performance.
- Flutter provides its own graphics engine, optimization in which is close to native. Images change at the speed of up to 60 frames per seconds, which is perfectly perceived by the human eye.
- On Flutter, you cannot immediately write an application that will work perfectly on any device, any year of release. It will take tests, edits - just like on any native framework.
Thus, the answer to the question of why Flutter and not another cross-platform technology is obvious. Flutter is faster and more stable than other frameworks. The speed is 60 frames per second. This allows you to make animations smoother and run applications even on older models of smartphones. Appearance and UX Flutter-applications make them identical to native applications. Flutter's technical features enable you to develop applications faster by reusing most of the code between different platforms, and the business logic, layout and application interface remain almost unchanged. Because of this, Flutter applications are more profitable than native ones.
2. Fast development
- When compared with two native applications, the development is 20-50% faster. Speed depends on the complexity of the interface and the necessary functions.
- Understanding of the developer from which side to approach the task.
- If you need to launch the application urgently with the further acceleration of development.
Matthew Smith from the AppTree is sharing how Flutter is making a world of difference in AppTree development. “We invested a lot of time and a lot of money into our clients. And this was a tough decision, but Flutter made it much, much easier. So what we did internally is we agreed to a six-week project to kind of test the waters of Flutter and make sure some of the big questions that we had could be answered. And after just three weeks, we had a functional Flutter client working. Obviously it wasn't production ready, but it was enough to prove to us that this is the move we need to make. So we found, when we started doing our Flutter implementation, that most of this code was already complete. Building UI in Flutter is extremely fast”, says Matthew Smith.
3. Vivid and flexible UI
- Flutter allows you to implement a native “look and feel”, but the UI elements need to be manually registered. The framework itself will configure fonts, scroll physics, navigation gestures, and more.
- Apple users find tiny differences in the UI (animation and dynamics).
- Flutter is ideal for unified UI / UX. You can mimic native applications and use familiar animations. The end user will not notice the difference if all the widgets are configured correctly.
This is how David DeRemer shares about developing UI using Flutter. “With only three months to design and deliver the app, we knew we needed to iterate quickly on the UX and UI. Flutter's hot reload development cycle meant we could make a change in our UI code and, in about a second, see the change reflected on our simulators and phones. No rebuilding, recompiling, or multi-second pauses required! Even the state of the app was preserved between hot reloads, making it very fast for us to iterate on the UI with our designers. We used Flutter's reactive UI framework to implement Hamilton's iconic brand with custom UI elements. Flutter's "everything is a widget" approach made it easy for us to compose custom UIs from a rich set of building blocks provided by the framework. And, because Flutter runs on both iOS and Android, we were able to spend our time creating beautiful designs instead of porting the UI”, says David DeRemer.
Development stage
After the MVP release, the development stage begins, where the speed of adding new features is roughly 20% faster. This advantage is achieved through testing. Indeed, the presence of automatic tests, good coverage of the UI and business logic of Flutter reduces the chance that innovations will “break” something in the current version. If during the test run on iOS an error in the logic is found, the developer fixes it only once. This, in turn, results in no error during the tests of the application under Android (the problem will not pop up). Under the native development, the set of errors will be different, which will require more resources for editing.
What if Google abandons Flutter?
If one day Google decides to wind down a project, your apps will be safe. Flutter source code is publicly available and you can just take the code base and all current developments and implement new functions.
Is Flutter safe?
There will be no differences from the native development, since the native technologies of the platform itself are used: Touch ID, Face ID or fingerprint scanner. In addition, the application code is encrypted in such a way that it cannot be restored using reverse engineering.
Conclusion
Flutter is a promising framework. It is expected that on the horizon of 3 years many businesses with scalable projects looking for an option to quickly develop applications for iOS and Android with the simultaneous intention to keep the quality and save the budget - will switch to Flutter. If you are - give Flutter a chance now with a team of developers from Webdevelop Pro.
AppTree: https://www.youtube.com/watch?v=vnj2i6RNo3g
Hamilton Musical: https://www.youtube.com/watch?v=kfd-oLypqFI
KlasterMe: https://www.thedroidsonroids.com/blog/apps-made-with-flutter
Building An SVG Map With Vue.js
This article provides a simple example of using Vue.js to work with SVG graphics.
6 top soft skills for QA
Not all skills needed to be a good QA are technical. In the long run, the lack of so-called “soft” skills costs the team in general and QA engineer in particular more expensive than the lack of technical knowledges.
Creating SVG Animation With Lottie
Designers often face the fact that if they create a cool icon / illustration on the site, it’s important to animate it exactly as it was intended. Many are afraid of the process itself, how can it be implemented independently without the involvement of a