Flutter: Getting Started

I have been developing iOS for a few years, but I recently left my job. With my free time last week I learned flutter and released a tip calculator on both stores.

I didn't spend very long setting up android studio, once I picked up a build of flutter. I launched it as a plug-in for studio. Make sure you can run the command below.

Creating a dart project was easy. Inside the project, there are generated components for Android and iOS respectively.

Inside tip_calc is a directory lib. This directory has the only dart file for our app. main.dart can be opened with studio.

The next few lessons were not easy for me as an imperative programmer. Dart is a declarative programatic layout built into a language. But it still makes me feel slightly at home because studio works well with the strongly-typed features; much like Xcode and Objc or Swift. Whether you're making a new view or widget, the real power comes from working with the correct object. I very much enjoyed the power inside the widget catalog.

main.dart will have a very simple main implementation. The important thing is a call to runApp inside the main function. This will be the thing that begins building the tip calculator. The app created is a stateless widget because it will hold some immutable data about our design. Any label or button created from this point forward will be decorated using the declared behavior.

Inside the build function you'll find an argument home. This parameter will be the object that represents our initial screen.

This gets a bit crazy, but it's nothing that special. Our TipScreen will build itself using a TipScreenState. It is a declarative pattern similar to something like viewController.setViews(for state: SomeStateEnum). Except in dart our views or widgets will only change if setState({}) is called.

Inside TipScreenState there's another implementation of a build function. Instead of an app this build function will return our home screen. The appBar parameter will represent a top navigation-bar with a centered title. The rest of the app is written as widgets inside the body parameter of our TipScreenState.

Dart feels weird here, but it's cool. Column is widget that takes an array of other widgets and arranges them vertically. We wrap the Column in an Align widget that is constrained to the top middle of the screen. After a quick hot-reload I added two rows of buttons separated by a center textfield. I did a few other things, creating some animations, and handling text inputs. But this is pretty much the nuts of my first flutter project. It is really easy to release a build for Android and or iOS.

The only problem that might stop me from using flutter for my next project was the iOS app size. I didn't see similar bloated sizes for Android releases, so this is likely to change and get better in the future! For this example my iOS app was 5 times the size of the Android apk.