Why Native App Developers Should Consider Flutter Seriously
Quizzical about trying Flutter for your next project or wondering about the benefits your business will gain from it? Despite you being a CTO, a Technical-Lead or an app developer who needs to stay abreast with technologies to make effective app development decisions, this piece proves to be beneficial.
If you dwell from a development backdrop, then you probably have heard about Flutter, Google’s open source framework for creating cross-platform apps. Launched in 2017, the curiosity about Flutter in comparison to Xamarin kept on increasing since it made its debut.
But, if you are a rookie to Flutter, firstly let’s understand what Flutter is and what makes it a must-have for native app developers.
What do we all do with the emerging technology stacks?
We saw how it worked and what experience it crafted, for what we asked ourselves unskippable questions:
- What is it like to get started with Flutter dwelling from a Native app background?
- What about switching from Native Languages to Dart, the one used by Flutter?
The experts of Android and iOS development have invested a lot in it and here I will try to answer these questions. Without any further ado, let’s delve to know how was first impression and steps with Flutter.
Saying Hello To “Flutter”
Flutter is an SDK (Software Development Kit) to create “modern mobile apps” with a complete framework, widgets, and tools that offer developers an easy escape to developing and deploying visually attractive, fast mobile apps on Android and iOS platforms.
Is that all?
Here’s more, Flutter:
- It’s free and open source.
- It offers its own widgets, crafted with its own high-performance rendering engine. They are dynamic, beautiful and customizable.
- It’s grounded on Dart — a fast object-oriented programming language which is easy to learn.
- All thanks to its rich widgets, Flutter apps look and feel great (you can easily craft your own custom app design, but simultaneously can also use readily available User Interface elements following specific platform’s guidelines).
- The architecture of Flutter is grounded on the very popular reactive programming of the present environment.
- According to Stack Overflow, it’s going to be a bottleneck competition to React Native, along with Native app development.
Probably, you must be wondering if React Native and Flutter are the same?
Also Read : How Flutter Proves To Be The New Hue For Mobile Development In 2021
So, Is Flutter Like React Native?
Many professionals among you must have knocked across Flutter a long time back, and a handful of them at that time have bookmarked it for the near future of hacking. Also, at that moment, I did not delve into much detail and mentally bucketed it into the same array as React Native.
On a random aspect, the React Native comparison is quite apparent. On an ideological level, the similarities with React Native begins and ends with the reactive programming model.
In my humble opinion, Flutter takes a mammoth leap ahead in terms of the ideas it has integrated upon. Put, I have tried using React only a couple of times, most of the time for learning purposes. Now, I am not going to compare React with Flutter. Indeed, I think most of the developers are not considering Flutter seriously because of the mental bucketing with React Native.
Here, my goal is to try hands-on and convince native app developers (Swift/ObjC/iOS or Java/Android/Kotlin) to give Flutter a serious look. The fact that the same code can run on Android and iOS is arguably not the biggest reason why Flutter is the top choice of the best cross-platform app development company. And, without any further ado, here are the reasons why I feel Flutter is the future of app development.
Here’s The First Look To Flutter and Dart
Is it all Dart?
Dart what?
This is the common reaction I encounter, when I talk about Flutter to other developers. And, to be honest, Dart has not much to offer of a syntactical advantage in comparison to swift or Kotlin.
Although, I just want to shed light on this point, because I assume Google under-estimates how many developers won’t try out a new tool when they think they will have to learn a new language. So much, that it would not matter even if it’s technically superior.
But, in Dart’s defence, it’s a simple language to learn, and is unlikely to be a deterrent for trying Flutter out.
#Part 1: Documentation
Let’s begin with Documentation.
Google sounds to be investing mammothly in this as they are investing in coding, the actual framework. There are numerous channels where documentation is available for the community to join and reap enormous information, right from how to start with this technology to advanced features and techniques.
As an exemplification, there is the Flutter Developer Page with all the basic setup and class documentation, with their official YouTube channel and many other popular platforms like StackOverflow, Slack and Medium that are developers top pick to discuss technologies and find solutions to specific problems.
#Part 2: Sketching Up A Project
Eclipsing Flutter’s Get Started page makes everything work the right way. Whereas, if you dwell as a native developer, going through Android Studio as IDE offers full support for Flutter + Dart development by simply integrating a couple of plugins.
When you are done downloading the SDK and choose your IDE of preference, you are pretty much ready to step ahead. Remember, for running your app on iOS simulators you will be requiring XCode installed on your desktop.
Yes, this clearly portrays that if you are working on a Windows PC then testing your app on iOS devices could be an uphill task.
But, in the case of Android Studio, the Flutter extension offers a feature called Flutter Inspector allowing hot-swap rendering to iOS by using Android emulators, which is going to be dynamic for UI development.
A Healthy Reminder: Flutter Inspector’s hot-swap only works with Android emulators but not with iOS simulators.
The Project: Dart and It’s Reliance
As native mobile developers are used to managing multiple languages on a single project like Swift and Objective -C for iOS and Kotlin and Java for Android, it’s a tedious little project of adding yet another language, Dart, to that mix.
Unsurprisingly, for some beginning work with Dart, I felt somehow familiar with languages already known. Besides, naming conversation, like using underscore for private methods and variables or also using “snake-case” for naming files, somehow combines a Java syntax with more modern languages features.
Also, Dart borrows some JavaScript patterns with Native support for “async”/ “await” functions that are easy to understand syntax, plus assures integration through the Future object.
With expectations, you can use a surprisingly big set of libraries available for Flutter through Pub, letting you not reinvent the wheel and use packages developed by other proficiencies for FLutter and the Dart ecosystem.
The synchronized third-party libraries and other project configurations are defined in a “YAML” file called pubspec, which is easy to relate to using Gradle on Android or for iOS in CocoaPods.
Hands-On With Flutter
To explore Flutter a little more, I have decided to re-create some screens.
The journey starts from here — “Getting Server Data”
First and foremost, it’s crucial to get some data from the respective server, followed by searching for a library link on “pub.dev”. I could not find many results, just one for Flutter but it proves to be quite popular and well-managed.
Right after aligning it to the project and syncing the packages, the app developers follow the documentation to start getting data from the servers. At that place, I was able to try hands-on the asynchronous capabilities in Dart.
Here’s How It Works:
Besides some unseen work, like data classes creation and parsing, I was able to get the data pretty fast and also the code was clean and readable. Although, the code is almost self-explanatory, here’s an insight of what each method is doing:
Method 1: It’s a method to be called from our widgets to invoke the async call.
Method 2: The method that returns the options needed for the query. This is a
Although the latter is somehow obvious, it’s crucial to mention that the “-handleResult” method is being called in as your main thread, which means that the data parsing is carried on the User Interface thread.
However, this is not always recommended, since data parsing may be consuming resources that end up lagging your UI. And, to avoid these, Dart has an escape by using the “compute()” function, which I consider quite neat.
Now, is the time to show something on the screen.
Something On The Screen — “The User Interface”
Undoubtedly, this is a big topic for Flutter development company in Dubai from many aspects. So, starting from its essence, Flutter “crafts” the interface of rendering platform-specific UI elements in the hierarchy as other mobile native technologies do.
Flutter uses Skia as its graphic engine to craft the user interface. Skia is an open-source visual library sponsored and managed by Google allowing technology to target the same interface implementation to many platforms. This platform consists of iOS and Android only but supporting desktop and web apps in the route map for Flutter.
But, what does it mean for the end-users?
Well, I have pocketed some concerns regarding the “drawing” approach.
- Backward Compatibility:
It’s up to the Flutter developers or on third-party libraries to brace different looks for different operating system versions. This clearly means that you are in the utter need to update your app in the stores when these changes occur, else your app may look typical in these scenarios.
- UI Platform Uniformity:
It’s all about the Flutter framework rendering the User Interface as targeted platform requirements “to be native”. This means how a button looks and how scrolling feels, gestures perform, and transitions are made.
- Performance That Matter:
As Skia appears to be very efficient, you have to stay alert about creating your app’s interface and avoid any UI pitfalls; else, you will end up with a laggy UI.
An Impossible To Avoid — “Widgets”
In Flutter, widgets are impossible to miss. A widget is initially an idea used to wrap a specific piece of code as a component to reuse. They are not confined to UI related code, but most of the UI elements have a widget representation.
As you know, Flutter SDK comes with a lot of predefined widgets, and regarding UI, there are probably a lot. From essential elements displaying a simple string Text to more complicated control like the ListView, there are other widgets out there, like sizing and distributing elements, styles, actions, and animations. Indeed, a YouTube playlist is known as Flutter Widget of the week, which is an excellent reference to find new and Exciting widgets to use.
So, in short, to create the User Interface, you have to wander on Widgets, stacking, nesting and clutching them all together.
The Hot Topic — “State Management”
This is the buzzing word with Flutter since it made its debut. It’s known that Flutter relates to a unidirectional data flow pattern, often found in reactive programming. While, on native development, mostly opt for one or a combination of MVC (Model-View-Controller), MVP (Minimum Viable Product) or MVVM design patterns depending on requirements and taste.
As there are examples from the community trying to find new ways to use these patterns in Flutter, Google motivates devs to adhere to some reactive programming flavours integrated by different approaches.
If you are not sure about which is the most suitable solution, go for the provider approach that Google is pushing. If you are still perplexed, there’s a Google I/O specific talk about this approach to insight into how this fantastic Flutter library could help you move your present approach to the provider.
Thus, choosing an ideal state management pattern will solely depend on the app you are trying to develop and how experienced or comfortable you are with the app developer approach. But, if your techno-partner is coming from a native development environment, it’s observed all the approaches are coupled to the UI code, envisioning a challenge if you are ready for the migration of your app in a mature state.
The Interesting Feature — “Hot Reload”
One of the significant and exciting features react native app developers consider of Flutter is “HOT RELOAD”. It allows a live preview of the changes you make on UI code without rebuilding the project as you would usually do on Android Studio or Xcode.
Hot Reload sounds to work great and save exponentially on your time during UI development from the experiences. If Flutter didn’t have this feature, it would take ages to craft UI, and the deficit of designers would make crashing into UI development on Flutter a daunting task.
So, coming from the native world with interface designers and constraint-based layouts, the process of creating UI on Flutter had a steep learning graph. But, thanks to hot reload, massive documentation and a proliferating community, the good old trial-and-error accelerates the process and eases the learning curve.
Finally…
While Flutter is an emerging technology with no sign of stopping, it promises a good piece of contribution to the multiplatform development landscape. Everyone’s eye is looking forward to how far it will go.
What’s your call on Flutter? If you are planning to start your mobile app development project grounded on it? Talk to experts that are ready to walk the extra mile.
