
Exploring Flutter for Cross-Platform Mobile Development - amarokaz
https://sethlopez.me/article/exploring-flutter-for-cross-platform-mobile-development/
======
mythz
Definitely interested in seeing how Flutter progresses, IMO it has the optimal
architecture for developing native, x-plat iOS/Android UI
([https://flutter.io/technical-overview/](https://flutter.io/technical-
overview/)):

    
    
       - High perf Skia based UI for pixel perfect rendering and high-level Material design widgets
       - React inspired, productive development model
       - Fast dev/iteration cycles with hot reloading
       - Productive and high-performance Dart language, natively compiled (AOT on iOS)
       - Enable native interop with underlying iOS/Android APIs
       - Actively developed by Google
    

Overall I think it has a superior architecture to React Native where it will
enable higher-perf native iOS/Android Apps in a single code-base but still
enables a productive development model with Instant UI updates and hot
reloading. I've done Java and Kotlin Android Apps as well as Obj-C and Swift
iOS Apps but I find React Native's dev model a lot more productive.

Unfortunately I've run into a few issues with React Native that I've had to
workaround which I've submitted repros to months ago but received no response
from the React Native team except in the last couple of days where they've
closed it without even looking at it because it didn't receive
comments/activity from other devs. In the last 2 days React Native has closed
773 other issues because they consider it low priority:

[https://github.com/facebook/react-
native/issues?q=label%3AIc...](https://github.com/facebook/react-
native/issues?q=label%3AIcebox+is%3Aclosed)

This gives me low confidence that React Native will be a high quality platform
with current low-priority issues lingering indefinitely so I welcome
competition from Google with Flutter and will be anxiously looking forward to
trying it out when it gets out of alpha.

~~~
on_and_off
I have very low hopes for React Native too.

It is sad but the name Facebook on any engineering project makes me think
twice before considering adopting it.

Flutter looks like it could be really interesting framework.

Especially since it should allow to write apps for iOS, Android AND Fuchsia.

I am quite happy with kotlin on Android & Swift on iOS (and their respective
native frameworks) but if Google publishes Fuchsia as Android's replacement
with Flutter as its app framework, it could be an interesting switch :

Rewrite your app in Fuchsia. It is going to take a while of course BUT you are
going to be able to publish the new on both Android & Fuchsia (in order to
still support 'legacy' for a while)

~~~
blikdak
Ahem, GWT anyone?

~~~
kyrra
GWT had its purpose. You need to remember that it was released before jquery
was a thing. And also to realize it was the first (was it?) framework to push
the large single page apps that worked in all browsers. It was created so
Google could make the AdWords and Adsense UIs.

Today's AdWords UI uses AngularDart. So they've moved away from GWT. But 11
years ago the JavaScript landscape was very different.

[I work for Google, but I was doing GWT dev for 4 years before joining]

------
svdev
I had high hopes for flutter but gave up after a while. It feels like their
design meetings were spent arguing about grammar and splitting hairs, rather
than thinking about ergonomics and how people would use it.

In Flutter, everything is a nested pile of objects with too many APIs to keep
track of. Take this example:
[https://github.com/flutter/flutter/blob/master/examples/stoc...](https://github.com/flutter/flutter/blob/master/examples/stocks/lib/stock_row.dart#L41-L56)

Why do I need to care if something takes a `child: (single object)` argument
or a `children: [LIST of objects]`?

Flutter would be better with JSX: JSX hides how the puzzle pieces fit
together. I don't care if it takes a child or children; just make everything
connect the same way.

React Native's Flexbox also beats how Flutter did things. Why do I need to
memorize which objects take which styling arguments? You want to center items
on the screen? Re-nest everything inside a Center object! You want a column or
a row of elements? Use a Column/Row object!

For a framework that's trying to bill itself as a great tool for prototyping,
it feels like I'm sifting through a mountain of minutiae. I was able to guess
my way through a React Native app and be right 99% of the time. With flutter,
my luckiest guess would lead me to an abstract base class... Then I'd have to
dig around to figure out what the hell I need to use to make a view
scrollable. Seriously:

[https://github.com/flutter/flutter/blob/c6b0f833af9e431df1e6...](https://github.com/flutter/flutter/blob/c6b0f833af9e431df1e67f15e8b51a76e8bc7d71/packages/flutter/lib/src/widgets/scroll_view.dart#L42)

Why?

~~~
tomatsu
> _Why do I need to care if something takes a `child: (single object)`
> argument or a `children: [LIST of objects]`?_

The IDE tells you what's needed and the latest version of the plugin
automatically adds a list literal and places the cursor inside it:

[https://groups.google.com/forum/#!topic/flutter-
dev/LXafJQqS...](https://groups.google.com/forum/#!topic/flutter-
dev/LXafJQqSK4M)

Personally, I think it makes sense to differentiate between exactly one and
zero or more.

> _Why do I need to memorize which objects take which styling arguments?_

The IDE should do that for you.

~~~
mmjaa
>The IDE should do that for you.

Fail. IDE dependence is an anti-pattern and a programmer-smell.

~~~
tomatsu
Either the IDE/editor is able to assist you or you have to consult the
documentation regularly.

That's just how it is.

JS' standard library, for example, is really tiny but I haven't memorized all
of it. If the editor can't clue me in, I have to check the docs.

~~~
mmjaa
Nothing wrong with doing any of it, as long as its a dependency you can manage
while also maintaining productivity... but such is the life of a Javascript
developer.

------
TheAceOfHearts
Nice write-up. I've been popping my head on over to their project every few
months to check out their progress. Something that's pretty cool is that
they're using Flutter to write Fuchsia's UI [0].

My favorite thing about Flutter is that it looks like they took some heavy
inspiration from React. If anyone reading this isn't familiarized with React,
or they don't really "get it", I'd highly suggest reading the Removing User
Interface Complexity, or Why React is Awesome [1].

One of the big problems with implementing a UI toolkit is having to re-
implement everything relating to accessibility. Although it's totally
understandable that they're still focusing on the core.

Something I'd be interested in seeing is how Dart and Flutter might affect
battery life. I'd expect the stock UIs to be pretty well optimized by now, but
I have no idea how Dart stacks up in performance.

[0] [https://github.com/fuchsia-mirror/sysui](https://github.com/fuchsia-
mirror/sysui)

[1] [http://jlongster.com/Removing-User-Interface-
Complexity,-or-...](http://jlongster.com/Removing-User-Interface-
Complexity,-or-Why-React-is-Awesome)

~~~
sethladd
[disclaimer: I work on the Flutter project]

One of the reasons we picked Dart was that is compiles to ARM (native) code.
Dart has been pretty efficient for the project so far, but we haven't yet
looked very deeply at battery life. Something to keep an eye on!

~~~
bitmapbrother
Do you use GC or RC on iOS?

~~~
abarth
GC

------
fauigerzigerk
_> Though Flutter doesn’t use the native UI widgets, it’s a cross-platform
framework and has widgets for both Android and iOS. [...] On iOS, the biggest
thing that stuck out to me was the scrolling. It didn’t quite feel right
because of the physics, but I’m sure that would just require a little tweaking
by the Flutter team._

Count me a skeptic. This is the same approach taken by Java's Swing (now
JavaFX) toolkit and apparently it has exactly the same issues. Swing never
felt quite right even after decades of tweaking.

~~~
yrio
AFAIK, Qt also uses the same approach (it does not use native widgets), yet it
does not get the same bad reviews like Swing & JavaFX.

On the opposite, I think people generally like it.

I wonder why?

~~~
fauigerzigerk
Perhaps because Qt occupies a couple of niches that don't have a particularly
entrenched native look and feel or are not very widely used.

Home entertainment systems, in-vehicle entertainment systems, kiosks, medical
devices, avionics, Linux desktop apps, printer displays, navigation systems,
industrial equipment controls, these are the sort of things that Qt is mostly
used for.

Do you use a Qt desktop or mobile app on a day to day basis? The only Qt app I
have ever used is QtCreator. It's a good development environment, but the look
and feel is definitely a bit weird.

~~~
Const-me
Microsoft also did that in WPF.

For Windows PCs, it was already a widely used native look and feel. Also wide
selection of native Win32 controls, mostly implemented in ComCtl32.dll.

Yet in WPF I can easily replicate native look and feels, if I want so.

~~~
sureshv
That's because WPF like winforms used native windows controls under the hood.
Calls would be marshaled via pinvoke.

~~~
Const-me
Simplest way to verify, launch visual studio 2015, press Tools/Spy++, in Spy++
find the visual studio’s main window, you’ll see that Win32 thinks visual
studio is a single window with no children, with class starting with
“HwndWrapper[DefaultDomain;”

Unlike that, Spy++ itself uses Win32 (wrapped by MFC but it doesn’t matter)
for GUI, you’ll see these SysTreeView32, msctls_statusbar32 and other native
controls there.

~~~
sureshv
I stand corrected - thank you. I don't have a windows machine anymore but as
you said spy++ can tell you all you need to know. Hilarious to still see
hungarian (hwnd - handle to a window).

------
htormey
Nice article. The lack of native iOS looking components would be a deal
breaker for me.

I wonder how stuff like navigation is built? If that's all in dart I'd be
interested in seeing how the back stack looks in the hierarchy explorer. I.e
are precious screens rendered still.

~~~
sethladd
[disclaimer: I work on the Flutter project]

We're adding more Cupertino (iOS-flavor) widgets. A few that we already have:
spinner, toggle slider, button, alert. Check out the library
([https://docs.flutter.io/flutter/cupertino/cupertino-
library....](https://docs.flutter.io/flutter/cupertino/cupertino-
library.html)) and let us know which ones you'd like to see next!
[https://flutter.io/issues](https://flutter.io/issues)

Thanks!

~~~
foepys
Will your custom widgets work with all iOS accessibility features?

Accessibility is often forgotten when something gets reimplemented.

~~~
abarth
The goal is to work with all iOS accessibility features. You can see our open
accessibility issues here:

[https://github.com/flutter/flutter/issues?q=is%3Aopen+is%3Ai...](https://github.com/flutter/flutter/issues?q=is%3Aopen+is%3Aissue+label%3A%22prod%3A+accessibility%22)

Notice that there are several open issues relating specifically to iOS
accessibility features.

Accessibility is not complete yet, but it is definitely not forgotten.

------
bschwindHN
> Though Flutter doesn’t use the native UI widgets, it’s a cross-platform
> framework and has widgets for both Android and iOS

Hot-reloading and good performance are very attractive parts of Flutter, but
they really should have reconsidered the decision to make their own UI
widgets. When you use the native UI elements, you get that native look-and-
feel for free, and you don't have to dump man hours into replicating that
behavior. They could have a "UI backend" which calls out to the native UI
elements for each platform. The great thing is that since they use these UI
widgets natively on Fuchsia, they can use their existing code as just another
backend on that platform without having to throw the work away.

------
bitmapbrother
That chat app demo they coded at the I/O 2017 presentation in under 400 LOC
was pretty ridiculous (in a good way) considering all of the functionality it
included. The demo code was run on an iOS and Android device and each used its
respective look and feel.

------
Const-me
Awesome stuff. And the license appears to be OK. The only thing that worries
me is their language choice, for some people that would be too much new stuff
in a single project i.e. too risky.

Finally, people outside Microsoft started to realize modern GPUs and high-
resolution screens need a purposely-built GUI framework, designed for GPU
rendering from the ground up. Especially on mobile platforms. MS did that in
2006 with the first release of WPF, and with WinRT/XAML they continue to
pursue the approach.

------
themihai
This may be off-topic but I'm wondering if there is any chance to see cross
platform and cross language toolkits any time soon. Something based on
WebAssembly so that we don't have to worry or bash about programming
languages. Dart is cool but should we all learn Dart now?

~~~
grey-area
Here is what developers want:

    
    
        Platform independence 
        Choice of tools/language
        Control of customer data
        Hardware independence
    
    

Here is what corporate platform owners (Google, Apple, Microsoft, Amazon etc)
want:

    
    
        Platform lockin
        Minimal support costs (one language, one SDK)
        Control of customer data
        Control of the ecosystem
        Hardware independence
        A vig on every transaction 
        

There are very few intersections between the interests of developers and the
interests of platform owners (be that Apple with iOS or MacOS, Google with
Android, or MS with Windows). This is why the web will win IMO, it's one of
the few platforms focussed on what customers and developers want, and not
owned by a single corporation (though Google has come close).

~~~
iiiggglll
> focussed on what customers and developers want

I would hardly agree with the modern web being focused on what "customers"
want. How many web pages today hijack scrolling, fill the screen with ads that
lie on top of the content and don't scroll with the page, and so on? How much
bloat is there? How many MB of unnecessary JS frameworks must be downloaded,
often on a metered data plan, to support all of that? The web is a horrible
mess these days. It may be a rip-roarin' good time for (some) developers, but
it's absolutely awful for users.

~~~
grey-area
Compared to app platforms, I think it is more open and more focussed on
readers and devs. The problems you list are annoyances of some websites, not
even the majority. For example they don't apply to the site you are currently
on not hard limitations.

In contrast iOS forbids other payment systems (see deliberately limited kindle
app) and browser engines. Android forces manufacturers to prominently feature
lots of google products.

------
jeffjose
How does flutter compare to weex? (Native VueJS)

------
mike_hearn
From a quick look at the sample code and a scrub through the video, it sounds
a _lot_ like JavaFX, especially when combined with the Kotlin TornadoFX
extensions.

Relatively recent build of a custom widget toolkit? Check.

GPU accelerated 60fps compositing, render and animation layer? Check.

IntelliJ as the IDE? Certainly. Although JFX is perfectly usable from any Java
IDE?

Cross platform including across iOS and Android? Check. (except JFX also does
Mac/Win/Linux).

Fairly standard layout and box packing model. Check.

Material design? Via a third party company called Gluon, check.

Functional reactive design? Check.

Async/await? Yes, Kotlin has coroutines that integrate with JavaFX.

Hot reload? Actually yes, JVM+TornadoFX has some support for this, although
it's not as slick as what Flutter can do ... the view you're working on will
be sometimes be thrown out and rebuilt. But if you change your CSS or the
behaviour of e.g. event handlers, then you can do hot reload.

There are some differences I see. Dart focuses more on AOT compilation.
Another is immutable widgets in Flutter. That one I'm not convinced about at
all.

> You can respond to events, like user interaction, by telling the framework
> to replace a widget in the hierarchy with another widget. The framework then
> compares the new and old widgets and efficiently updates the user interface.

No explanation for this odd design is provided. I suppose they believe it is
self-evidently superior, but that seems like a lot of overhead for very little
to me. After all, GUI is pretty much THE standard definition of a big pile of
mutable state, and trying to pretend its not by just generating more garbage
than a normal GCd toolkit would seems a little strange.

~~~
skybrian
Flutter has stateful widgets too, and they can be arbitrarily nested with
stateless widgets.

Stateless widgets are useful for static boilerplate that only changes when
moving to a different screen, or when swapping out an entire subview.
Supporting arbitrary mutations is extra coding that's unnecessary when it's
not going to change anyway. Why implement it when you don't have to?

Note that even with entirely stateful widgets, if the whole layout changes,
the whole subtree generally to be thrown out which also creates garbage.

------
twotwotwo
I also played with Flutter recently. Timeline: heard Kotlin announcement at
I/O, went through some Kotlin exercises, wanted to compare with Flutter/Dart.

Dart feels somewhere in between JavaScript on the one hand and a more-static
OO, GC'd lang w/type inference (like Kotlin!) on the other. You can probably
look closely at some sample app code and start doing some basic stuff quickly
if you've worked much with JS and something more static. (Further study seems
worth it if you plan to do a lot, heh!)

As others note the UI model seems Reacty--you write "builder" methods that
recreate a widget tree when things change, and something behind the scenes
sorts out an efficient way to update the screen with just what really changed.
I'm not _hugely_ worried about performance: your UI rebuilds should be
separated from your animations, and anyway, building your virtual widget
hierarchy ideally shouldn't be too CPU intensive in the first place.

Hot reload is pretty great. I can't actually compare with "real Android" dev,
but changes to my little app showed up in under a second in an Android phone,
emulated or real. There were a couple surprising things about the basic libs,
e.g. Flutter master only recently added a convenience object to bundle
together a radio/checkbox and its associated label-stuff (RadioListTile).

The Flutter Gallery app is available on Google Play and its source is in the
Flutter git tree. You can see a lot of the Material widgets implemented,
including rich list types (e.g. tiles w/photos), pull-from-the-side drawers,
top-of-screen tabs you can swipe through, bottom-of-the-screen nav bars etc.
Even on iOS Google seems to follow Material guidelines a lot (or at least, the
Daring Fireball guy complained that they do; I don't have iOS to check), so
maybe it's the easiest fit if you're prepared to do the same. Someone who
works on Flutter mentioned elsewhere in these comments that they're working on
components that look more like the iOS-native ones, though.

Although Android Studio is _based on_ IntelliJ, you need to get actual
IntelliJ if you want to use the plugin (Studio's component versions don't
match the ones that the Flutter plugin works with, I think). Also, if you have
Studio 3.0 canary installed (like to futz w/Kotlin, heh!), you need to either
configure Flutter to look for the stable Studio 2.3's copy of Gradle (flutter
config --gradle-dir=...) or just make sure 2.3 is located where the flutter
tools look by default (~/android-studio for me on Linux). People working on
Flutter helped some of us through this at
[https://github.com/flutter/flutter/issues/10236#issuecomment...](https://github.com/flutter/flutter/issues/10236#issuecomment-303029027)

You get a lot of IDE-ish luxuries (as OP notes): Control-Space to offer
identifiers, methods, or params available; autoformatting with dartfmt (right-
click menu); lots of quick feedback when you mess something up.

Hixie (Ian Hickson) of the HTML5 spec works on Flutter which is kinda neat (he
did RadioListTile just now! and there's a milestone on GitHub named 'Make
Hixie Proud' haha :D). Outside of the tech specifics, Dart's an interesting
creature in that it seems like it's got some key customers in Google (AdWords,
so, like, the part that makes money) but comparatively little pickup outside.
On Flutter GitHub you see people paying attention to outside-adopter issues
(or even passerby issues such as my Gradle-version thing recently). There's
apparently lots of tooling available publicly, e.g. a package manager (pub),
dartfmt, IDE plugins, a playground (dartpad.dartlang.org) etc. Curious to see
if there's any more pickup on the outside.

~~~
skybrian
You can also use the Flutter plugin with the free, community edition of
IntelliJ or with Webstorm. (But WebStorm does not have any Java or Android
support.)

Also, the Dart plugin for VS Code is starting to add Flutter support. In that
case you'd use the command line for hot reload.

\- a Googler working on Flutter plugin.

~~~
twotwotwo
Yes--I should have mentioned I was using free IntelliJ!

Also great re: VS Code!

------
sireat
Cross-platform development has been the holy grail for some 30+ years.

Alas, I stopped reading the moment I read it is being developed by Google
despite the open-source nature.

Being developed by Google it means the chances of a project being discontinued
are quite high:
[https://en.wikipedia.org/wiki/Category:Discontinued_Google_s...](https://en.wikipedia.org/wiki/Category:Discontinued_Google_services)

While other big corporate entities have their own share of shut projects (no
project is forever) the moment this project stops getting official Google
support it will wither and die.

Maybe I am reading this wrong and we could have a Open Office/Libre Office
situation.

~~~
bitmapbrother
>Being developed by Google it means the chances of a project being
discontinued are quite high

Do you also avoid Microsoft products and services because of the chances of a
project being discontinued are quite high?

[https://en.wikipedia.org/wiki/Category:Discontinued_Microsof...](https://en.wikipedia.org/wiki/Category:Discontinued_Microsoft_software)

You can also add these to the list:

    
    
      Wunderlist
      Sunset
      Games for Windows
      Silverlight
      Zune
      Kin
      XNA
      PlaysForSure
      Flight Sim
      Expression Suite
      SteadyState
      Windows RT
      Windows Phone 7
      Forefront
      Front Page
      Money
    

Or how about Apple?

[https://en.wikipedia.org/wiki/List_of_products_discontinued_...](https://en.wikipedia.org/wiki/List_of_products_discontinued_by_Apple_Inc).

~~~
sireat
I did say that other corporate entities discontinue products all the time.

I suppose the difference with Google products is that they usually seem "cool"
and very promising.

With Microsoft I have no such expectations.

------
on_and_off
> If there were dropped frames anywhere, I sure didn’t see them

I would be curious to know what terminal the author uses. On my N6P, I can see
a lot of dropped frames in the flutter demo app.

~~~
sethlopez
Author here. I have a Nexus 6. I hadn't tried the Google Play app until today
so my observations were based on the sample app that I had built and another
Flutter app that's in the play store called Newsvoice. I was under the
impression that the Flutter sample app was just a github repo, and I didn't go
through the trouble of trying it out.

The Flutter app in the Google Play store does lag for me during the first run
of most large animations (nav drawer open/close, shared transitions, etc.).
The second time those animations are run, everything is smooth. There must be
some sort of caching in place for animations.

As far as I could tell, everything else seemed to be fine. Scrolling
performance was good, as were smaller animations like checkboxes and switches.

------
sebringj
This feels like a bad idea. Let's write a platform on Dart which is esoteric
in terms of usage and community and hope for the best? Seriously? The whole
reason to do a framework is to make it big so it has a tons of community
support. I just don't understand the point although it looks elegant.

------
invalidname
Codename One ([https://www.codenameone.com/](https://www.codenameone.com/))
runs circles around fluttr.

~~~
madeofpalk
> 180M DEPLOYED APPS

This is quite a claim...

Edit: It's customary to include a disclaimer you work for the product your
spruiking FYI.

~~~
Cyph0n
They must be counting every single test app as being "deployed".

~~~
invalidname
It's installed apps on devices == deployed. That's a reasonable number at
those scales.

