First view on Flutter (an Android Developer View)

Elye
Elye
Nov 17, 2018 · 11 min read

Flutter made a big news in Google IO 2018. The most interesting point is of course a single development and can deploy on both iOS and Android!! So decided to take a quick testing on it, and share with you how it feels like from a first view of it, from me an Android Dev.

What’s bother to check out Flutter?

  1. First of all, it is from Google (as Android Dev, let’s support Google 😜)
  2. It can work with Android Studio (and maybe Xcode, I’m not sure, but who cares 😜)
  3. It can compile into Android and iOS app with a single source!!! (below is one example I experiment from the codelab. Single code into 2 platforms)

What I tried…

I’m basically glancing through various blogs, and also doing some exercises provided by Google’s Codelab

Sharing my findings, so you could just quick glance through and have a feel of what Flutter has before you decide to get your hand dirty.

Caveat: I’m an Android Developer, so my view of it would be very much from one already familiar with Android Studio. So I’m comparing it pretty much with normal Android Development.

Installation

The installation is pretty straightforward. As an Android Dev, the additional components you’ll need to add is

  1. Flutter SDK (download and unzip it to the folder, then export the path of flutter executable)
  2. Flutter and Dart plugin for Android Studio (go to AndroidStudio →Preferences →Plugin →BrowseRepository)
  3. Optionally: I think you need XCode to be available so that you could have iOS Simulator (run from Android Studio… yeah, you could run iOS simulator from Android Studio!!) .. Note: I’m not 100% sure we need Xcode, but I have one on my machine.
Screenshot from Android Studio, showing iPhone X to run the App

Command line

Unlike Android Studio, instead of using ./gradlew, we will us flutter instead. Several command example below

flutter doctor

Display your machine if they have the components needed to develop with Flutter

Note, you don’t need to get all the ❌ become ✅, but only one of it (e.g. I only do for AndroidStudio and not IntelliJ, and don’t bother about libmoduledevice and ios-deploy issue for now (Maybe will need it when I deploy it, but not when I’m testing it)

flutter update

I haven’t use this, but I believe it is for updating to the latest version of the Flutter SDK.

flutter create <project>

This is like /gradlew compile your project and build the apk

flutter run -d “emulator/device-name”

This is like adb -install that will install and execute the app on the device.

This command impress me, as after it got executed, it does provide some command line feature below (I press h to display it)

The most impressive is to hot reload changes. I guess one could make changes, and try to reload it instant it like instant run.

Also note, to screen shot, just press s will do. Many more stuffs can be done as shown above and I haven’t explore them all. Pretty impressive.

Flutter in Android Studio

If you have installed Flutter plugin in Android Studio, in your File →New menu, you’ll have New Flutter Project, which then leads you to the 4 possible fluter project components you could create as below.

From here, we could see the 2nd and 4th component is enabling Flutter interacting with Android module or App. Wow, some interoperable ability!!

Sample Project

The default sample project given in Flutter is an app with FAB that will increment the count as shown below.

And from this App, it could show you the special feature of Flutter, which is Hot Reload. Similar to Instant Run but better and more reliable. The entire Flutter infrastructure is build based on this as it’s fundamental.

Cross platform operability

If you go to the Tools →Flutter, you’ll be able to see two function, i.e.

  • Open for Editing in Android Studio
  • Open iOS module in Xcode.

These two features allow one to open the Android or iOS side of the code of the Flutter project. I believe with that, one could enhance the project on the specific iOS platform with other modules, pod accordingly. Interoperability!!

Development in Flutter

Coding in Dart

Unlike Android native development, which has XML as the UI layout, and Java/Kotlin code, Flutter uses Dart programming language for everything.

It is still Object Orientated Programming, when we work with class and inheritance. The declaration like Java where they type comes first then only variable, and semi-colon to break a line.

However, In comparison with Java (7) and Kotlin, I think Dart is more similar to Kotlin fro it’s usability point of view, where it has features like

  • Functional parameter
  • Default constructor argument
  • Async-await
  • Multiple class in a file
  • Null aware operator

There are something that is unlike both Java and Kotlin. e.g.

  • the private variable or function is defined with prefix underscore _
  • one need to import another dart file even if they are in the same folder.

You could check more about it from the below sites

UI in Widget

For Android development, we use XML to draw our layout (same for iOS, though the XML is auto generated from the interface builder), Flutter uses Widget which is fully written in Dart as well for it’s UI.

The entire App is wrap into a widget, where the top widget could be a MaterialApp which is provided by import ‘package:flutter/material.dart’;

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

The MyHomePage is also a type of widget (StatefulWidget — as you could guess, it is a widget that can have state changes)

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}

And MyHomePageState is a state where will return a Scaffold widget.

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;

void _incrementCounter() {
setState(() {_counter++;});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pushed the button this many times:',),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

Refer to the below site for more info.

Having said all in code, there are some utility side which make some of the UI coding easier, such as the use of Flutter Outline

When click on centralized the Scaffold, it help to add a wrapper Center code and auto indent the codes

Navigate from Page to Page

There’s no more concept of Activity or Fragment. Everything is Widget. So how could one navigate from one page to the other?

It is by using the Navigator widget, where the below example shows, it is using the MaterailPageRoute to route and return a new Scaffold widget as a new page.

Navigator.of(context).push(
new MaterialPageRoute<void>(
builder: (BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: const Text('Saved Suggestions'),
),
);
},
),
);

Add dependent library

As Flutter is not using gradle, how could it add external Flutter packages?

This could be done by adding the dependency to pubspec.yaml instead. Below is an example of adding a package of english_words

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.0
english_words: ^3.1.0 # add this line

After added the dependency, you might need to click get dependency from the top prompt when you try to compile your code.

After that, one need to remember to import it in the code

import 'package:english_words/english_words.dart';

Reseting build

In Android Studio, whenever we face some weird compile issue, we are used to go to Build →CleanProject

In Flutter, we can’t do that anymore.

I tried to go to the Project Folder and rm -rf build, and my project doesn’t compile anymore. I need to close and reopen the project. So don’t do that!

What you need to do instead is, go to Tools →Flutter →FluterClean instead.

Preparing App for release

In actual, I haven’t release any of Flutter App. But I have checked out some aspect one need to look into before releasing the App.

App by default is Debug

If you compile and run the App, by default they are debug build. And this is easily seen as there’s a stripe on the right side of the app-bar showing it

To release the App, you’ll need to make it releasable, and the process differs for each platform (for obvious reason)

Do I need to proguard my App?

Where for Android Developer, this is like a must-not-forget thing to do, though one could release an App without proguard.

Technically there isn’t any Android Java or Kotlin code that you need to protect, as it is all Flutter’s code. But in case you still like to do it, you could follow the to your proguard file

#Flutter Wrapper
-keep class io.flutter.app.** { *; }
-keep class io.flutter.plugin.** { *; }
-keep class io.flutter.util.** { *; }
-keep class io.flutter.view.** { *; }
-keep class io.flutter.** { *; }
-keep class io.flutter.plugins.** { *; }

I tried, and it reduce my App size from 26.3MB to 25.8MB. Not much help.

The only reason you might want to do that is if you have other Android module that you need to Proguard.

However, you might ask what about your Dart Code. According to this stackoverflow, the Dart code is compiled into .so file. I believe it, as I use apk decompiler to check it out, not easy man….

But if you are still paranoid, there’s a way to handle it as listed in

Is Flutter ready to take the world?

Well, this is a very personal view, and limiting to what I know and see. I do see Flutter has lots of fun exploration, especially would be really handy for quick prototype for both iOS and Android release for some simple test the market App. But I think there are still some deterrence of it overtaking the Native development work.

The App size

If you are thinking of building a simple App, you probably want it to be really small. The overhead of Flutter is already huge >20MB. Of course if compare to Facebook or Uber App, this might be nothing. However imagine if one have to add another 20MB overhead, it is not a number to be neglected.

Nonetheless, it is heard that the Flutter team haven’t spent time looking into making the small size a priority yet. When they do so, things might change.

The change of development paradigm

Moving from Java to Kotlin, is merely a language change, and mostly positive change. The risk is really so low and as developer I don’t see any risk at all. Even then, its endorsement is still be carefully considered until Google finally endorse it fully.

For Flutter, the entire development paradigm changed (at least when compare to Android Developer that is used to Java/Kotlin/Gradlew/XML layout etc). Adopting to new approach would need sometime to establish the convention that suite for the organization.

Perhaps there’s some convention out there that is of similar nature to Flutter development (that I’m not aware of… as I’m a purely Android Developer)… still then it is definitely not as smooth as Java to Kotlin for a pure Android Dev like me.

Maybe we don’t need Android or iOS dev anymore… someone else could do the job instead? That’ll be a different story. I’m talking as an Android Dev.

Limited ecosystem — still dependent on Native Development

One main reason if an organization decide to go Flutter instead of Android or iOS native development, is because of its capability of supporting 2 platforms simultaneously.

However, there limited library available from the open source community (for now) would be restricting to it.

Yes, it could connect to existing Android module library with plugin or iOS pod perhaps (I don’t know), but then that would require platform dependent knowledge to work with. So back to square one, native developer need is there.

Besides, it’s capability to leverage the device feature e.g. camera, geo-location would definitely need the platform specific side of code handling. E.g. the googlemap work require to link to Android and iOS code

Life cycle and state restoration support

For Android development especially, live cycle and state restoration knowledge is the core of its development model.

I tried it out on Flutter, seems like its support is not there yet.

There’s an issue filed, and there’s a need to considering exposing the lifecycle method to Flutter as below

Imagine if one has to expose the Life Cycle to Flutter code, this would really makes Flutter code more native development than platform independent. Native knowledge is still required to may be even more tedious as native knowledge of two platforms is required to work on one piece of code.

So this is not ideal yet, and solving this problem would be tricky.


Having said all that, I do see some value of Flutter as a different development model, and could potentially be used on some segment of business need, especially for simple app that doesn’t interact with any device specific needs, and not sensitive to state restoration.

From development point, it is also another interesting model, as from it, I heard it solve some problem on the testing framework, where UI unit test could be done more easily with Flutter.

Well. I’m sure Flutter will improve on its limitation. But will it take over the world and replace native development… my view is, it will be a while.


Anyway, in case you like to learn Flutter and explore it, the below blog wold be a good place to start

I hope this post is helpful to you. You could check out my other interesting topics here.

Follow me on medium, Twitter or Facebook for little tips and learning on Android, Kotlin etc related topics. ~Elye~

Elye

Written by

Elye

Learning and Sharing Android and iOS Development