Flutter? What is it?
Mobile development is exciting more than even. Developers can create their apps in their own way, you can choose. But the ability to write code once and run anywhere in the future of our development.
Knowledge this ideal, Google joined the battlefield with their new weapon - Flutter. The internet once lively again with those articles “Flutter - Build beautiful native apps in record time”, “Reflectly - From React Native to Flutter”, “Why I move to Flutter”,... So what is Flutter? All why everyone is so hype about it?
“Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.”
In a simple way, Flutter is an open-source mobile application development SDK created by Google. It is used to develop applications for Android and iOS, as well as being the primary method of creating applications for Google Fuchsia. Fuchsia is a new operating system currently developing by Google, which might be the Android killer in the future. If you are interesting is this new OS, you can check it’s Wikipedia page for more information.
Flutter is written in C, C++ and Dart. The framework is relatively young, it’s being loved by community and growing escalated quickly.
Our team has done some research, finding its beautifully, we decided to use Flutter in our future projects. This article is written in a Junior Android Developer’s point of view, after using Flutter in our works. Now let’s digging in.
Flutter framework overview
Like I said, Google used Dart for this new framework. Dart? Strange as it may sound and look like this is not going to be a friendly programming language, right? But trust me and give it a try.
Dart is a great supporter for asynchronous programming with Future, async, await and Stream. It support you to handle all the tasks in the similar approach of Rx (ReactiveX) programming.
Google said that Dart can render consistently 120 frames per second, because Dart will compile your code into ARM C/C++ library which will compatible with native components of mobile apps. This is the reason why Flutter will run incredible fast on your device.
Dart also has a Garbage collection and a Virtual Machine for its own. Wow now you can see that Dart is just as great as Java, but which a modern syntax, AWESOME.
Learning Dart doesn’t mean you can only create mobile apps via Flutter. But you can create your web apps with Angular Dart, and even more use Dart on your backend side. So in one day, we will be able to develop in all three platforms but with only one language: Dart.
Compiler: AOT and JIT
Flutter (Dart) uses both of AOT (Ahead Of Time) compiler and JIT (Just In Time) compiler
In Debug mode: Flutter will use JIT compiler, Flutter will compile your code in the runtime, helping Flutter attach your debugger, profiler to your app efficiently. In this mode, you will have to exchange your APK or IPA size, and its performance for these necessary utilities.
In Release mode: Flutter will use AOT compiler, Flutter will compile your code before runtime. So your app will reach its maximum performance.
High level overview
The major components of Flutter include:
- Flutter engine
- Foundation library
- Widgets and Design-specific widgets
Flutter’s engine, written primarily in C++, provides low-level rendering support using Google’s Skia graphics library. Additionally, it interfaces with platform-specific SDKs such as those provided by Android and iOS.
The Foundation library, written in Dart, provides basic classes and functions which are used to construct applications using Flutter, such as APIs to communicate with the engine.
UI design in Flutter involves assembling and/or creating various widgets. A widget in Flutter represents and immutable description of part of the user interface; all graphics, including text, shapes, and animations are created using widgets.
Flutter also contains two sets of widgets which conform to specific design of two famous OS, Material Design widgets which implement Google’s design language for Android, and Cupertino widgets for Apple’s iOS design.
Flutter provides Platform channel which will help us to communicate with specific OS’s components such as Camera, Service,...
As you can see in the above image. Flutter, actually, is an Activity in Android app or an App Delegate in iOS app. Meaning that you can communicate with your native components or you can make an Flutter app being a part of your Native app.
Flutter vs React Native vs Xamarin: How do they work?
How do they work?
Now let’s see how Flutter and the other frameworks work!Native
In native apps, the OEM SDK’s have their apps written in their respective languages (Java, Swift,...).
Well, in Flutter way, Flutter will do all the works, literally. Flutter uses native ARM binary. It’s compiled ahead of time. This mean it’s fast. Really fast. Next it tells the whole framework UI system: “Take a break, I’m doing this my way.’’ Then it render all of your UI with their own widgets, that give you incredible capabilities.
|Maturity||Young (v1.0.0)||3 years+||7 years +|
|Lifecycle management||Still missing some application states||Full support||Full support|
|Documentation||Rich and easy||Chaotic and unclear||Lack of good documents|
|Tooling||IntelliJ idea, Android Studio,...||Atom,...||Visual Studio|
|APK size||~5.6MB||~8 MB||~14 MB|
|Pricing||Free||Free||Paid in previous years|
|Plugins||Great supporting from community, but still missing some.||A lot||Limited access|
Flutter is still very young compare to React Native and Xamarin. Being a newborn framework but Flutter is growing quickly than ever. Although Flutter still in beta version but it already had 50,5k stars on Github. In that meantime, React Native have to spend 3 years to have 73,0k stars and Xamarin only got 2,6k stars.
All three frameworks have their own Lifecycle management, but Flutter only support a few state of the widgets instead of app’s lifecycle like React Native and Xamarin.
Google is well-known for their skill in writing documentations. So learning Flutter will easier with their rich and easy understanding docs. But on the other side, React Native and Xamarin developers shared that their first experience with the framework is not as great as their expectations. React Native and Xamarin documents is unclear and chaotic for new developers.
Being a Google’s products, Flutter has all of the support of its owner. You can write your Dart code in Android Studio or even IntelliJ idea IDE. While React Native can use a lot of IDE like Atom,... But you can only code Xamarin in Visual Studio.
I created a simple Hello world in these platforms to figure out which frameworks is the best optimized. In Flutter, your APK will be only 5.6 MB compare to 8 MB of React Native and 14 MB of Xamarin.
Both Flutter and React Native are open-source frameworks. Meanwhile Microsoft only release their source code.
Flutter is still in beta version, so it might be lack of third parties plugins. While React Native and Xamarin is mature enough to help you in mobile apps development. But I can guarantee that Flutter is ready for production. Give it a try!
You can see that Google and Facebook use their own framework for their products. But despite of being a new framework, Flutter already gained other big companies trust (Alibaba, AppTree,..) because of its beauty and fantasy.
Why should we use it?
Flutter is a cross-platform framework developed by Google and being primary method of creating applications for Google Fuchsia OS.
Flutter can build complex UI without a doubt with great performance, which can render your app up to 120 frames per seconds, unlike other cross-platform frameworks.
Google’s being well known for their rich and easy understanding documents,
Flutter also provides Hot Reload, which is a tool help mobile developer save their time a lot. Imagine instead of doing Gradle build every time you make a simple change in your code, now you can just Ctrl + S on Windows OS or Command + S on MacOS, bomb, then your change have applied to your app without spending another 5 minutes for the compiler.
Things we should consider
Although Flutter can run up to 120 frames per seconds, but its performance isn’t actually good on low-end devices, especially on my 4 years old ASUS Zenfone.
Flutter has been released with version v1.0.0 but I think it isn’t really ready for complicated apps. It still have some bugs, around 4k1 issues on Flutter’s Github repository, but Google developers are working hard every day to fix these issues.
Finally, Flutter’s APK and IPA size is larger than Native’s because Flutter have to compress all the framework into your app, which is the same approach as React Native or Xamarin.
Knowledge the potential of Flutter, our team decided to use it. Although these products are simple, but using Flutter is time saving solutions, we delivered these products sooner than the customer’s expectation, and our customers delighted with the functional and performance of the apps.
Flutter is a great framework, and might be a game-changing in our development world. If you want to try a cross-platform framework, try Flutter then, and I can guarantee that you will love it.
So that is my experiences after using Flutter in my works. If this article have any issues, please don’t hesitate to point it out, all the opinions are appreciated. Thank you for your reading.
- Wikipedia: https://en.wikipedia.org/wiki/Flutter_(software)
- Google Flutter.io: https://flutter.io/
- Dart language: https://en.wikipedia.org/wiki/Dart_(programming language)
- Medium - In plain English: So what the heck is Flutter and why is it a big deal?: https://medium.com/flutter-community/in-plain-english-so-what-the-heck-is-flutter-and-why-is-it-a-big-deal-7a6dc926b34a