My Introduction to Flutter

I sat down last weekend and spent some time with Flutter. Though I only wrote one small sample app in it, and I’m not a mobile developer by trade, I wanted to write down a few of my thoughts on it.

The Good

Flutter is Written in Dart

I’ve become a big fan of Dart over the past few weeks. It lives in a space that is approachable from both a C# and a JavaScript perspective, has an approachable package management system, supports functions as first-class objects,  and approaches “strong typing” via dynamic objects with type annotations.

Flutter Compiles to Native

The title says it all. Apps written in Flutter compile to native code on iOS and Android.

Flutter Supports Hot Reloading

This is something that you can see in demos and videos, but it has to be experienced to be fully appreciated. It cuts down on development cycles significantly, and is just plain satisfying to hit the “r” button and watch your changes spring to life without bringing the application down and up again.

The Bad

Flutter is in Alpha

Depending on how adverse you are to deploying alpha software to production, this could be a good or a bad thing. The bright side to Flutter being in alpha means it can only get better!

Some of the More Useful Examples are Buried

I know that this is less about the framework and more about the support system, and that opinion on this may vary from person to person, but the Getting Started tutorials for Flutter, despite being very good at explaining the framework and how to get up and running, do not, in my opinion, dive into the proper way of building multi-screen apps early enough.

Consider the sidebar:

navigationBar

The section that covers making multi-screen apps, and introduces some of the core concepts is not until “Routing and Navigation”, and the previous examples, while good and useful (Building Beautiful UIs with Flutter was particularly helpful), give examples with no Navigation. I highly recommend developers new to Flutter go through the “Get Started”  and “Build UIs” section, but before they sit down and write any code, they check the excellent examples on the Flutter GitHub Page.

A Final Important Thought

This is what I wanted to really talk about:

There is no Template Engine Or WSYWIG Editor

When I first started developing with Flutter I was somewhat surprised to learn that they do not have WSYWIG editor like other UI frameworks (XCode and iOS,  Micoroft Blend and WPF, Android Studio and Android). If you jump in the Flutter Gitter, the maintainers have mentioned that they don’t have any public plans to release one:

noPlans

And you know what? I’m okay with that.

Earlier, I mentioned there is a magic to hot reloading your app, and this is why I don’t feel like Flutter strictly needs a WSYWIG designer. With Flutter, the app is the designer. You don’t like the style of a particular word box? Go find the Widget that contains it, edit the style property, hot reload the app and marvel at your design acumen!

The biggest downside I see is it raises a barrier to entry for people who don’t know how to code and want to design an app’s user experience.

Is there a space for a WSYWIG designer? Of course!

Is Flutter a great framework without one? Definitely!

Will I be using it for my future mobile endeavors? You bet!

Happy Coding!

Flutter on Windows without Android Studio

tldr; Install Gradle

Lately I’ve been falling more in love with Dart and Go, two modern open-source languages by Google, and with the recent murmuring around the Magenta kernel and Fuchsia OS,  I’ve been spending more and more time working in both languages (even writing an Epub reader in Dart).

While I’ve been enjoying writing console apps and libraries, I wanted to try my hand at writing some U.I. apps.

Enter Flutter.

Flutter “is a new mobile app SDK to help developers and designers build modern mobile apps for iOS and Android.” and it feels like a lighter-weight competitor to Xamarin. It has a great getting started guide, so I began with the setup.

Note: I’m running Windows 10 Creator’s edition with Hyper V disabled and Xamarin Installed. Your mileage may vary

After git clone -ing the repo and adding the flutter/bin folder to my PATH, I ran the flutter doctor command and got the following:1_flutterDoctorNoSdk

Flutter couldn’t discover my Android SDK (which I had installed via Xamarin previously), which was no problem: I simply set my ANDROID_HOME environment variable and it picked it up.3_sdkInstalled

Android Studio not being installed was problematic for two reasons:

  1. I was on a bad coffee shop WiFi and probably couldn’t download the entire 1.5 GB installer in a reasonable amount of time.
  2. I am a big fan of the Dart community, in particular Danny Tuppeny’s (@dantup)  Dart Code Visual Studio Code extension which makes developing Dart libraries a breeze, so I’d rather use VSCode and his extension over Android Studio.

With those considerations in mind, I decided to skip installing Android Studio and just run

flutter create myapp

4_flutterCreateWorksNoAndroidStudio

Which made a perfectly good Flutter application I can open and work in with Visual Studio Code.5_aWellCreatedFlutterApp

So let’s flutter run !6_cannnotLocateGradeInstallAS

Unable to locate gradle. Please install Android Studio

So that’s what Flutter needed from Android Studio! At this point my download of Android Studio was 50% complete with another hour to go, so I decided to download and install Gradle manually, update my PATH environment variable and give flutter run another try:8_gradleWorksButBadVM

I’m getting an entirely different error now:

Could not reserve enough space for 1572864KB object heap

A quick Google of this instructed me to update my gradle.properties file with

org.gradle.jvmargs=-XX\:MaxHeapSize\=256m -Xmx256m

Now flutter run took me further, informing me that I had not accepted the license agreement for Android SDK Build-Tools 25.0.3. Which was actually somewhat misleading. In fact I had not even installed the 25.0.3 Build-Tools.

A quick trip to the SDK Manager to install and accept licence for the 25.0.3 Build-Tools, and one last flutter run got me to a successfully running Flutter app, all before Android Studio finished downloading.17_runningProperly

18_runningInEmulator

Success!

From here you can iterate and improve on their sample apps or get started with your own!

Happy coding!