Why I move to Flutter

Nhan Cao
Nhan Cao
Mar 19, 2018 · 8 min read

Abstract

I’m a android developer and researcher also. After few years working with native apps, to deal with medium app I looked about cross-platform with interest. I used to work with Phonegap, Ionic and for now I’m using React Native. When Flutter published first beta, it took me some days to read all docs and article about it, and really awesome. Its great and I decided moving to Flutter. So why I moving while Flutter is just beta1 with a lot of issues, look some points in this article.

What is Flutter?

Flutter is a open-source toolkit, developed by Google which is mobile app SDK for building high-performance apps for iOS and Android, from a single codebase. [Google I/O ’17]

Accordingly to their promises:

Flutter makes it easy and fast to build beautiful mobile apps.

If you want to understanding thoroughly please read carefully all list item at: https://flutter.io/get-started

Why use Flutter?

From https://flutter.io/technical-overview/

What are some advantages of Flutter? It helps you:

  • Be highly productive
    — Develop for iOS and Android from a single codebase
    — Do more with less code, even on a single OS, with a modern, expressive language and a declarative approach
    — Prototype and iterate easily:
    * Experiment by changing code and reloading as your app runs (with hot reload)
    * Fix crashes and continue debugging from where the app left off
  • Create beautiful, highly-customized user experiences
    — Benefit from a rich set of Material Design and Cupertino (iOS-flavor) widgets built using Flutter’s own framework
    — Realize custom, beautiful, brand-driven designs, without the limitations of OEM widget sets

Technology

Above just quote from Flutter page. Now let go to more detail.

Architecture [Architecture diagrams]

Framework with Dart

Dart, what ?. [https://www.dartlang.org/]

Dart is a general-purpose programming language originally developed by Google with BSD license. Dart is a very asynchronous language. With this, it uses isolates for concurrency. [First appeared October 10, 2011, Stable release 1.24 / June 12, 2017]

Dart helps you craft beautiful, high-quality experiences across all screens, with:

  • Productive. Syntax must be clear and concise, tooling simple, and dev cycles near-instant and on-device.
  • Fast. Runtime performance and startup must be great and predictable even on small mobile devices.
  • Portable. Client developers have to think about three platforms today: iOS, Android, and Web. The language needs to work well on all of them.
  • Approachable. The language can’t stray too far from the familiar if it wishes to be relevant for millions of developers.
  • Reactive. A reactive style of programming should be supported by the language. [ https://medium.com/dartlang/announcing-dart-2-80ba01f43b6]

Should move from java to Dart? Look some points:

  • Short syntax
  • Public by default, private by prefixing “_”
  • Collection literals;
  • Everything’s an object — no “primitives”
  • Named parameters, optional parameters, defaults;
  • Properties — no need to write “get” methods everywhere
  • Cascades — everything’s a builder
  • Type inference with strong mode — just write “var” for locals
  • Named constructors, auto assignment to fields;
  • String interpolation, several types of string literal;
  • dartfmt — worries about formatting so you don’t have to
  • Async running, thus it performs way better java, php

Java vs Dart

Guys, this is an exciting time for Dart.

Flutter is all Dart.

Same with React Native using all in Javascript. Some points why Flutter using Dart

  • For smart compiler:
  • Consistent 60 FPS (frames per second) performance: With smart compiler above Dart makes it easier to create smooth animations and transitions that run at 60fps. Dart can do object allocation and garbage collection without locks.
  • Use Dart for Unified layout. Everything is a Widget. Flutter support full set of Material Design widgets already; also support different themes for Android/iOS. Not care about XML or JSX anymore.

Flutter layout with “Design-oriented Development Flow”

Similar with web app design. Just a Container, Row, Col, Flex, ….

HTML/CSS Analogs in Flutter [Magic of Flutter slides]

Flutter is reactive

Reactive Frameworks on the Web

Reactive Frameworks on Mobile

With Flutter

Flutter widget every where

Widgets are now part of the app. We can customize it with your own style by using set of material widgets or access to painter and canvas to make awesome shape.

StatefulWidget vs StatelessWidget.

Widget state lifecycle

State<T> lifecycle

Optimized for Performance

Flutter with high performance compare with React Native and Native

  • Compiles to Native Code
  • No reliance on OEM widgets
  • No bridge needed
  • Structural Repainting

Native View

Cross-platform using webview

Cross-platform using React Native

With Flutter

Platform Channels

You will not be limited customizing native platform by using platform channel.

Flutter uses a flexible system that allows you to call platform-specific APIs whether available in Java or Kotlin code on Android, or in ObjectiveC or Swift code on iOS.

Messages and responses are passed asynchronously, to ensure the user interface remains responsive. [https://flutter.io/platform-channels/]

Begin with efficient tooling

You can start with cli or just using official IDE for Flutter is Android studio. Easy and useful.

Great debugging tool

Flutter support hot reload and you can easy debug UI, Mem, CPU, GPU, …. and execution with Android studio. It’s really good and better than React Native.

More contributions and More documentations

Although Flutter is a beta version but contribution a lot and will be increased by next time. Documentation is rich, more than React Native. [Get Started]

Apk build by React Native and Flutter

In FAQ’s Flutter: https://flutter.io/faq/#how-big-is-the-flutter-engine

I just use a simple hello page generated by React Native and Flutter to look overview apk

Apk size overview

With dev mode

Flutter in dev mode support lib ARM, x86 and x86_64 also while React Native doesn’t support lib for x86_64. Lib on Flutter only one but it’s size bigger than React Native. So that the apk size minimum build by Flutter is 21 MB initial.

React Native dev mode

With release mode

The apk size reduce appreciably on Flutter from 25.8 MB (dev) to 8 MB (release). But lib only generated for ARM, so that it’s only able to install on ARM device.

React Native release mode

Resource here:

Summarize

  • The advantages of reactive views, with no JavaScript bridge
  • Fast, smooth, and predictable; code compiles AOT to native (ARM) code
  • The developer has full control over the widgets and layout
  • Comes with beautiful, customizable widgets
  • Great developer tools, with amazing hot reload
  • More performance, more compatibility, more fun

Opportunity

  • Google’s product
  • Huge dev fan of google
  • Free and Open source
  • Rich documents
  • You will be hunted in next few year. :D

Challenge

  • Quite new
  • Beta version but let’s trust at Google bro. :D
  • Dart lang is not almost popular

Reference

Special thank to great articles which listed as reference. In this post I also using some images, quotes from their content.

Beginner first steps

Nhan Cao

Written by

Nhan Cao

Algorithm ♥ Read ♥ IT-books ♥ Travel

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade