The unique part of Flutter lies in using neither WebView nor OEM widgets that come with the devices, instead, it uses its own 2D rendering engine- Skia to draw widgets. Most of the Flutter’s system is implemented in Dart compiled programming language which makes reading, removing, replacing or changing the elements effortless. Before jumping into Flutter’s pool, let’s take a quick recap of Flutter:
Google I/O 2017 marked the announcement of Flutter where it’s publicly released as an early alpha. Later, during mobile world congress ahead of Google I/O 2018, the third beta release of Flutter was launched which is considered as a step closer to 1.0 build for Flutter.
Read more : Keynote of Google I/O 2018 Announcements
The open source mobile UI framework allows the developers to build elegant apps with native-like interfaces faster. The SDK has gained official support from the Material design team, which has closed the developers/designers gap with additional support tooling. There is much more to discuss. Have a look at What’s new in the Flutter?
Hot reload
Making changes to the source code and then watching its impact on the app often eats up a couple of hours. This makes the experimentation quite a task for the developers and slows down the app development speed as well. With the stateful hot reload feature, the table is turned upside down. After making edits in the Flutter app code while it’s running, the changes can be viewed in a split of a second just after reloading and the app retains to the same state on emulator, hardware or simulator, thereby alleviating the need to restart the app for every change.
It’s due to the injection of updated source code file by Hot Reload directly into the running dart virtual machine. The slew of changes, including the addition of new classes, methods and fields to the existing classes, and modification in existing functions can be made.
Material design
Material design and Flutter team have partnered to improve the support for material design with enhanced design aesthetics to the developers for building Flutter apps packed with appealing designs. With the implementation of Material design widget for Android and Cupertino widget for iOS, the catalogue of Flutter has become fantastic with several built-in user interface components which results in a high-quality app that syncs with modern design trends.
The widgets can be tweaked, reused and combined in novel ways to create custom widgets that incorporate interaction, motion, scrolling and visual design. Certain changes are made to the Material design widget to improve the flexibility and customization which are:
- BottomBarApp widget addition which allows the manipulation of the bar at the bottom of the screen.
- Extended support for Chips that illustrate the action, input, or attribute as compact elements.
- The InputDecorator now gets the support for filled/underlined/outlined modes to put lines which cover the entire text field box.
- A new feature for colours and shapes are added to the Slider
- More positioning flexibility is added to FloatingActionButton
New plugins
The range of plug-ins is electrifying the developers to start producing the apps using Flutter. With the early alpha release, many plug-ins such as Real-time Database, Firebase Analytics, Firebase Messaging, and Firebase Core were released, and in beta 3 version, they were updated to inch them closer to build 1.0. The announcement for three more new plugins- Remote Config, Performance Monitoring, and Cloud Firestore has been made in Google I/O 2018.
The AdMob plugin by Google is also added which allow Flutter-based applications to monetize with the display of ads, banners, interstitials, and video ads using AdMob API. But, the plugin is still in the rudimentary state where the required API is missing and some issues need to be fixed.
The plugin system allows the developers to easily and quickly access the new mobile OS and hardware features and capabilities without waiting for the Flutter team to expose the same.
The improvements
Widgets
The look and feel, and the performance of the widgets are paramount to the app success. In addition, the customizability and extensibility have become a need of the hour for building new widgets and mixing and tweaking the existing ones that reflect the brand.
The new architecture of Flutter includes the elegant, high-performing, customizable and extensible widgets. Don’t confuse the Flutter widgets with OEM widgets, DOM WebViews, or Flutter’s own widgets. Instead, the widgets and renderer move from the platform into the app to enable customization or extension of the apps.
The direct movement of widgets and renderer impacts the size of the app which is nearly equivalent to the minimal apps developed with comparable tools. It’s a big advantage of Flutter over others.
Layout
Traditionally, a huge set of rules is used to determine the position and size of various widgets in the layout, which in general applies to every layout method. Every type of layout defines numerous properties and includes a wide range of layout models. With gradual updates, the layouts are improved with the addition of new models which makes it easier for the developers to implement and create the best-in-class UI.
But, the developers cannot add the new models on their own unless they are added by layout method. Additionally, going by traditional way, the rules interact with each other and there are several elements on which the rules are applied, which in turn, influence the layout performance with the increasing number of elements.
Flutter has altered the complete game with significant performance gains by including quite a lot of widgets for doing the layout. The process of applying the number of layout rules on widgets is eliminated by allowing each widget to specify its own layout model. Consequently, every layout has a smaller set of rules which helps in optimizing the layout heavily.
Dart 2 language
Flutter has a need of language that meets all their needs and the criteria alongside following the standards. Dart score high on the evaluation due to the JIT based development cycle that supports hot reloads and shape changing, and Ahead-of-Time compiler that produces ARM code for predictable performance of production deployments.
The gradual update of Dart that’s Dart 2 has strengthened and streamlined the type system, rebuilt the developer tool chain, and made the syntax clean and concise to optimize the client-side development.
Post-update, Dart 2 fits the Flutter’s bill in terms of reactive programming, high-velocity development, easy learning, fast garbage collector, strong sound typing, great portability and fast runtime performance. In addition, the context switching between a separate UI markup language and the programming language is dramatically reduced with the introduction of optional new and const, which makes coding for UI a delightful experience.
What is the step taken by the foremost players?
It’s exciting to see the SDK has gained a lot of momentum in a couple of months. The several applications are published on GitHub and other players are planning to embrace it. It indicates the companies are ready to adapt to the Flutter shift. Here are the instances of a few brands:
Consistency of the across platforms, easy learning curve, and effortless UI code generation of Flutter has impressed the Ecommerce giant Alibaba. They have embraced the SDK for their flagship application- Xianyu and rolled out the updated app which enjoys the virtue of having more than 20 million active users.
The two aspects of Flutter- the easy integration with the existing app and writing code just once to deliver native experiences has appealed the Groupon company. They adapted to the platform to prototype and build new code for their merchant application.
The well-known Google AdWords app weaved Flutter in their app DNA helping the businesses with better tracking and optimizing of the online advertisement campaigns.
One of the most popular Broadway musicals of America- Hamilton Musical, scored a wild success in their journey by building a mobile app for both iOS and Android platforms to meet the smashing expectations of the users and increased fan engagement. They did all this in an extraordinary way with the development of apps just in three months by leveraging Flutter. Bingo! The beautiful apps are running smoothly and delivering brand-driven experiences.
Takeaway
Post-Flutter beta 3 release, Google is still optimizing the SDK with new additions and enhancements. Meanwhile, the interested developers have installed the beta version and playing around with it to start the production of Flutter apps. Plus, the detailed documentation, series of codelabs and the courses available are helping the developers to get up.
The growing community of Flutter at the unexpected pace is a great evidence of the rate at which the developers are joining the flutter revolution and increasingly experimenting with Flutter’s tools and libraries to bring ideas to life on iOS and the Android platform; no matter how experienced they are in development.
Access the platform’s native features and SDKs, and existing coding language knowledge to hop onto the Flutter app development bandwagon and create a major breakthrough ahead of the time and competitors.