Blog

Flutter

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?

If you aren’t similar with React Native or Xamarin framework, you can check it out at here for React Native and here for Xamarin.

“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.”
- Google Flutter.io

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

Language: Dart

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.

So why Google use Dart? Dart is a general-purpose programming language originally developed by Google. Dart is an OOP language, which is born to be the one to replace Javascript, but you know, life changes, now Google use it for Flutter.

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
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.

Platform channel
Platform channel

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!

How do they work? Native

In native apps, the OEM SDK’s have their apps written in their respective languages (Java, Swift,...).

Webview Webview

In the first generation of cross-platforms framework, our Javascript code will create a web app and then we wrapped it into mobile app Webview, which is a terrible solution.

React Native React Native

In React Native approach, Javascript code will compile to OEM SDK through the Javascript Bridge. This is still a weak point of React Native framework, impacting a lot to its apps performance.

Flutter Flutter

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.

Comparisons
  Flutter React Native Xamarin
Language Dart Javascript C#
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
Language

All three platforms has it own represent language, React Native uses Javascript and Xamarin uses C# - top programming languages of all time. And Flutter uses Dart.

Maturity

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.

Lifecycle management

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.

Documentation

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.

Tooling

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.

APK size

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.

Pricing

Both Flutter and React Native are open-source frameworks. Meanwhile Microsoft only release their source code.

Plugins

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!

Showcases
flutter
react native
xamarin

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?

Pros

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.

Finally, Flutter uses Dart, NOT Javascript. Being a Android developer, I used to static typing language such as Java, Kotlin or even C#. But Javascript is a nightmare to me, it uses dynamic typing and somehow learning it is a lot different experiences from other programming languages - which is madness. Flutter is using Dart, a language which similar to Java, Kotlin,.. make my experiences become “smoother” and “faster” .

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.

Projects review

joy sprinkler
certasec risk
sts insider
dovetails in progress

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.

Conclusion

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.

As a Leading Vietnam Software Development Outsourcing Company, we dedicate to your success by following our philosophy:

YOUR SUCCESS IS OUR MISSION.

Vietnam software development company

Contact Us