Flutter - my first impressions

Creating a full Bysykkel-app to get a full impression on Flutter.

📸: Ole Petter Baugerød Stokke
📸: Ole Petter Baugerød Stokke Vis mer

I’ve been hearing a lot of talk about Flutter recently. Flutter is Google’s framework for making cross-platform mobile applications with a single codebase (think Google’s answer to Xamarin).

It has been getting a lot of praise, especially for its Hot Reload function. Hot Reload basically means that you can keep your app running while you’re making changes to a view or page and see the changes almost instantly without stopping the app. As a Xamarin developer I know the pain points of the currently long and tedious design debug cycle that is “Run — stop — edit — repeat”, so from that standpoint I wanted to test it out.

I decided I would try to create a full app to get a full impression on Flutter:

  • The app utilizes open data from my local municipality to find the nearest available electric bike that you can borrow. They are located on bike stations placed around the city and the availability data is updated every 5 minutes.
  • The app uses your location to give you a sorted list of available bikes, from nearest to furthest from your location.
  • You can also see the bike station’s location by clicking a button which opens up Google Maps.

I’ve jotted down some of my thoughts and opinions here on this framework. Note that I have been using Xamarin for a few years now and most of these experiences will be compared to Xamarin.

Here’s a quick video of the finished app. It consists of three pages — a main page, a list page and a detail page:

Install process

First up is the install process.

Maybe I’m a bit spoiled with Xamarin, but the installation process with Flutter did take quite a while and involved some manual processes. You’ll need to download and install the Flutter SDK, update your path and install Android Studio. There might be a way to reuse the Android SDK’s and build tools from Xamarin instead of having to download Android Studio, but I didn’t take the time to investigate this.

I do like the fact that you are able to use VS Code instead of Android Studio to develop, which is what I did. Just install some extensions for Flutter and you’re good to go!

Dart?

Flutter is written in the Dart programming language. This was my first encounter with it so I was curious to see how steep the learning curve would be.

Luckily, as they state on their tutorial pages, you won’t have too much trouble if you’re familiar with object oriented programming and basic programming concepts (variables, loops, conditionals etc.).

Coming from C# there are a lot of similar concepts and syntaxes that are easy to grasp.

Hot Reload ❤

Oh my gosh I love this. This is everything that Xamarin is missing. The ability to instantly see your design changes (and code changes!) is awesome.

Every time you save your file, the view is reloaded with your changes. When you’re tweaking margins, padding or whatever on a view to get the right feel or you’re implementing an app from a design spec, this is just perfect.

Xamarin has been trying to achieve this through things like the Live Player and the Forms Previewer, but unfortunately they haven’t gotten it quite right yet. We’ll have to see if they have something in store later this year, but until then Flutter really got this right.

Design by code

One of the things I don’t like is having to create the UI using code and not markup.

«There’s just something that doesn’t feel right when you mix logic and design.»

There’s just something that doesn’t feel right when you mix logic and design. I also feel that you need to use more brain power to visualize your design when you’re writing the UI in code.

I get flashbacks to the early days of Xamarin.Forms before XAML was introduced.

Ecosystem

The Flutter ecosystem and community seems pretty mature and I easily found solutions to the problems I stumbled upon.

The Flutter Packages are also rich in plugins and I found just about anything I needed here. I also like the fact that this page contains all you need to get started: the package name, version and a code example on how to get started.

Using Xamarin you would usually have to swap between NuGet to find the package and GitHub to see how to get started.

App size

I was quite surprised by the generated app size, at least for Android.

An empty demo-app created with Flutter uses about 67 MB. In comparison, a Xamarin.Forms app for Android using a master-detail template uses only 22 MB. My finished Flutter app weighed in at about 80 MB, which is very surprising seeing as it is a pretty simple app.

I hope they put in some time and try to reduce the generated app sizes because the biggest apps are the first ones to go once your device is running out of storage space.

Conclusion

Flutter is a pretty good contender in the game of cross-platform mobile application frameworks.

If I didn’t have any experience in this field and were looking for a framework to get started, I would probably go with Flutter. Especially if I were to create an app from a complete design specification.

Personally I wouldn’t outright drop Xamarin over this, seeing as I have a pretty good grip on Xamarin at this time, but I would definitely recommend trying it out.