Flutter: Hybrid Mobile App Development

A couple weeks ago, I wanted to expand my mobile skills and learn something that allowed me to produce applications for both Android & iOS. I can build an Android application, but I don't have the skills to make that same application on iOS.

However, the offerings at the time years ago were things like Ionic, Cordova & PhoneGap. In short, all of those just built a web-view for the respective platforms and used some generic components that written once, worked for both. This is the mantra that Java uses, but you can easily tell a Java application from a native one. Just from how it responds and acts.

For these web-view hybrid solutions the application compared to other native apps, just feels horrible. You can feel the application you are using is just showing you an internal website. I didn't want to create an application like that, I wanted the benefit of native but one code-base.

React Native was an attempt at that problem. This time components (in JavaScript) had a matching native component for both iOS and Android. The time it takes for this JavaScript -> Native bridge to work can be slow for complex applications however. This is noticeable for developers as you can find a massive JavaScript blob inside every React Native application.

So enter Flutter and my 3 week progress of building an application from scratch in it.

Pro

• "Hot Restart" and "Hot Reload" changes development as changes can be shown nearly instantly on a device with simply clicking "r" or "R" in the terminal window.

Built build/app/outputs/apk/debug/app-debug.apk.
Installing build/app/outputs/apk/app.apk...                        19.1s
Syncing files to device Nexus 5...                                      
 2,794ms (!)                                       

?  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".

• I built the first 45 commits of my application only testing on Android. Once I had my Mac I built the iOS version. It worked perfectly. I did not have that luck in any my previous hybrid development.
• Dart is the language of choice for Flutter, which can optionally also compile down to JavaScript. The syntax resembles that of a C mixed with JavasScript. The benefit here is that Dart also compiles down into native code which makes the mobile experience cleaner.

Con

• Just a sample application clocks in around 37MB on Android. This is quite large due to the native components that Flutter (and your code) has.
• The language and community is quite young, even though Dart was released way back in 2011 it didn't gain much traction till v2.0 released in August of 2018.

Code Snippet

  void showMessage(String text) {
    var alert = new AlertDialog(content: new Text(text), actions: <Widget>[
      new FlatButton(
          child: const Text("Ok"),
          onPressed: () {
            Navigator.pop(context);
          })
    ]);
    showDialog(context: context, builder: (BuildContext context) => alert);
  }

This is an example method in Flutter, using Dart. It is pretty easily to read due to strict nature of the language, but it basically shows a pop-up message with an "Ok" button to dismiss it. On the code side, syntax that might only be familiar from ES6 makes it appearance in Dart. It is simple and hardly an example of the larger picture, but a good example of the use of Dart.

The Journey

This weekend is only the 3rd weekend of working on this Flutter project. I have lots to learn and to improve on, however I want to loop back to this as I learn more to provide insight to incoming searches if using Flutter is worth their time. So far my journey is better than any previous example of Iconic or React Native. I'm happy to see where it goes.