Multiplatform Development with Flutter

UX Comparison of Native iOS, Android and Flutter 

Introduction

So it was finally time to embrace the world of Multiplatform for us. We’ve been following the rise of Flutter since its start in 2018, but it took us a while to find the time and the right project to take it for a test run – until recently. 

Our senior iOS developer Aaron took our networking app we built for a fashion event last year and rewrote it in Flutter. He shares his key findings on what worked well, what needs improvement technically, and from a client perspective, and he gives a detailed analysis of Flutter vs. native iOS and Android UX. 

The Flutter Test Project

The app we chose for our Flutter check was perfect: 

  • It had a material design look and feel.
  • It needed to fetch, save and update data locally and on a server.
  • It required push support. 
  • It covered some non standard UI.
  • It had a login.
  • It had tables & Collections/Grids

Below we will delve into some pros and cons of using Flutter to work through your project. For us it is important that all pieces of the puzzle fit, so we will cover this from both the development side as well as from a consulting point of view.

This article already ended up quite large, so stay tuned for:

  • How we set up CD/CI to handle builds
  • Deeper dive into `Stream Provider` and keeping data and UI updated

Flutter Is All About Widgets

First things first…. If you have even slightly glanced at Flutter, you will know that everything is a Widget… no… really… EVERYTHING IS A WIDGET! This might feel unnatural at first, but having a common API to build the UI without an interface builder really ends up making life easy.

A widget is a module that can either be stateful or stateless and handles the configuration of the UI. The screen is a widget, the list is a widget and the views inside the list are widgets, too. With everything being a widget subclass, you can render them wherever you like without too much bother.

For simple view hierarchy and quick builds, nesting widgets inside each other is great. For complex reusable widgets, nesting too many make communication more complicated than other common patterns.

Comparison time to market

For an average application, it can easily take 300-500 hours for each platform. Flutter can nearly half this as it run from the same codebase. You will need to allow some extra time (say 10-15%) to ensure that you can follow common practices that are required per platform.

That’s a powerful advantage, especially in rapid prototyping for multiple platforms. Our app was a rewrite so we already had some backend API, that saved us time and we had a working MVP in just under 3 weeks. Getting a working MVP with real APIs out to the client in under 3 weeks – not too shabby, right? 😉

Six Features We Loved About Flutter 

  1. Docs are great 
    • Many videos and concise docs help make super fast progress.
  2. Lots of plugins
    • Built into the Flutter site, you will find many plugins for Firebase, Loading UI, Data parsing and everything else you need.
  3. Super fast to build simple apps
    • With the plugins and ready-made widgets, you can really move fast. These can be polished for release or they can be great for POCs (proof of concept) or MVPs (minimum viable product).
  4. Updating code on device without recompiling
    • Love this! Although sometimes you need to recompile, often you can run the code on device without recompiling.
  5. Some handy API for verifying data in forms
    • One of many cool things here is `final _formKey = GlobalKey<FormState>` and `and validator: (val) =>` this is a great way to validate form data and act accordingly.
  6. The widget builder pattern uses many of the same properties so changing widgets is never too hard
    • Not only can you convert a `Stateless` widget into a `Stateful` widget in 2 clicks, but swapping out widgets often only requires changing the class name! Super easy and fun.  

Six Issues In Flutter That Gave Me A Hard Time

  1. iOS simulator doesn’t always work on and sometimes UI doesn’t render properly.
    • We gave up on the sim in the end and did everything on device. Sometimes it just didn’t work, or if it did, the UI would be super jerky. We tried to fix it and found out the code was fine, but running on sim was not!
  2. Wireless debugging left on in Xcode will stop iOS app loading on device
    • Self explanatory! Don’t leave it on!
  3. Imports break when you change file structure
    • When importing a class and then changing the file tree, imports don’t update to reference the file… not so fun! 
  4. Often when doing many changes, hot reload won’t work and reload is super slow
    • Hot reload is great, waiting 10-15 minutes for a fresh install isn’t. Not sure what causes this, sometimes it can be the smallest change. 
  5. JSON parsing doesn’t have anything like Codable is iOS
    • All parsing has to be hand written or use the command line in congestion with other plugins to encode/decode. Generics, time, coffee and a good plan could fix this though!
  6. Error logs in console can either be soooooooo long winded or so brief you have no idea where to start.
    • Like it reads… this needs some work in some places.

Flutter Pros And Cons Consultants Should Be Aware Of 

When you are about to pitch a multiplatform project in Flutter to your client, it might be useful to keep a few Flutter specialties in mind. 

Flutter Pros

Brilliant for Rapid Prototyping

Flutter is a powerful tool for multi- and cross-platform development that saves time and budget if you want to test your app out in the market. It’s brilliant for POC (proof of concept) or MVP (minimal viable product) and it works reasonably well on both Android and iOS for a defined set of applications. See the Flutter FAQs for more technical info.

Pay 1, Get 1 Free: Cost-Efficiency

Well, it’s not like Flutter is offering freebies, but as a rule of thumb you could say: Native development of an app on two platforms (iOS and Android) will cost you around 1.8 times as much as 1 platform. Developing the same app on two platforms with Flutter will cost you around 1.3 times as much as a single platform. That’s quite an argument for a client.

Free and Open Source With Official Support

An additional bonus: Flutter is backed by Google, it is free and open source and it comes with an official Google support. You can use it to develop full-featured apps including support for cameras, geolocation, network, storage, and more.

But as you know, to every upside there is a downside – or even a few. 😉

Flutter Cons

Young Framework With Limitations

The framework is relatively young, it’s still growing and developing – and it’s mobile only. It comes with limited libraries, meaning you cannot implement everything the user is used to from a native app. We would recommend it mostly for building MVPs which come without any complex APIs and backend requirements.

UX Deviations from Native Platforms

The UX in an Android or iOS app built in Flutter will never feel as “native” as in native apps. It is hard to explain to iOS or Android users why a Flutter app behaves slightly different than in their known platform.

Scalability and Continuous Integration

In our test project we noticed that continuous integration in Flutter is not as easy and extensive as in native apps. If project requirements grow and feature requests arise, it is not that easy to scale your Flutter app – you even might need to re-develop the app if your requested feature is not supported by Flutter.

Examples of currently not supported features: Password manager support, keyboard extensions, watch OS, AR (limited). If you need such a feature in future: start from scratch.

Some comparisons:

Original Zeplin Designs:

Android native:

iOS Native:

Android Flutter:

iOS Flutter:

Kommentar verfassen