Writing my First Flutter App

Flutter is Google’s open source mobile app SDK that produces Android and iOS apps from a single, Dart-based codebase. I gave it a shot, trying to create a simple app. After a slight learning curve, it works great.

Starting Up

I spent a maybe 30 minutes getting set up and running the demo app, making small changes to see what happened. But I don’t find I’m very motivated learning by following a tutorial. I much prefer having the itch to build something, then figuring out how it’s done. It’s taught me how to code in many languages, and is more or less responsible for everything I’ve done.

To dive into writing Flutter, I first had to learn all about the Widget Framework. I have a few pages of notes next to me, and it took a good number of hours (and a couple night of sleep) to internalize it all.

The first thing to understand is that everything on the screen is a widget of varying size and scope. A block of text is a widget, just like a button, or a link, or a picture. White space is a widget too – padding and spacing. And complex widgets are composed of other simpler widgets – So I can build a widget that has a picture, a chunk of text and a few buttons. Widgets all the way down.

The second thing to wrap your head around is Stateless versus Stateful widgets. Everything is a Widget, but more accurately, everything is either a Widget that has no state information, or a Widget that can have a state that changes from a button press or user interaction or external event. They’re built differently with different lifecycles, and Widgets that are stateful can contain stateless widgets inside of it – and vice versa.

After I had that all floating in my head, I dove into the IDE and started writing.

IntelliJ IDEA, Dart & Flutter are Amazing

IntelliJ IDEA,  the IDE that the Flutter docs recommend, is amazing. Code is autocompleted. Warnings about missing requirements are helpful instead of loud and annoying. There’s a terminal built right in, and your most common functions are all made into helpful buttons. The Dart Analysis Engine alerts you to best practices, warns you of compile errors, and generally holds your hand through writing code.

In general, I found it very difficult to break my app while writing it. The IDE was always a step ahead of me, telling me what would work and what wouldn’t. It made development a dream.

Oh, and sub-second hot reload? Amazing. Change code, click, view changes without losing the screen you were on, with the state that it was running. Such blistering fast testing of changes, I can’t go back to anything else. It’s like hacking CSS on a live webpage, the results are that fast.

Also – I found out today that WebStorm now has the Flutter plugin. A convenience for me, since it’s my IDE for all of my hundreds of Dart projects.

Looks Great, no Styling Needed

Flutter is very interested in pushing Google’s Material Design. No matter how you feel about the design principles (I love them, personally), the design and layout framework makes getting an app up and running and looking great effortless. It’s also easy to tweak to your needs, should you desire.

Think of it like an extraordinarily powerful and infinitely tweakable CSS ruleset. It’s guaranteed to make you app look unified, animate great, and generally keep out of your way until you need to change something specific.

Magic Behind the Scenes

How do you make a single code base in charge of two very different mobile platforms? If you’re Google, you decide to control each pixel on the screen and make the app look like’s it’s built natively, when really it’s a highly advanced rendering engine.

They claim it’s high performance, and I have no reason to doubt it. And I don’t have to worry about too much layout and animation pipelines either – their libraries make everything feel complete with very little code on my part.

Not Production Ready

Flutter is still in technical preview, so no surprise here. There were a few times when I had touched something I apparently shouldn’t have, despite following the docs as closely as I could, and lost the ability to run my project – it just wouldn’t compile or run properly anymore. So I’d create a new project, copy / paste some code, move some assets, and it would all work fine again.

I’m Ready to Start Using It

It may not be version one yet, but it’s good enough for me to want to write apps with Flutter right now. The well documented and tested integration with FireBase is a huge plus too – there’s a talk scheduled for Google IO on May 19th to share more on that front.

But yeah – blistering fast development time, and once the learning curve over widgets is done (and maybe a little about Navigation), I’m ready to take on pretty much anything. Bring it on.

oh, the dumb app I made, btw

When I play fighting games, I like choosing ‘Random’. But some characters I like more than others. So I built an app to choose random Smash Bros. fighters for me, with a separate view so I can change the randomization options – assigning a bit more or less weight in the randomizer to certain characters. (i.e. pick Pit and Dark Pit less than anyone else, why are there two of them?) So images, multiple views, lists, loads of inputs, saving to device: all in under 500 lines of code, working on iOS and Android.

2 Comments


  1. Have you tried publishing the IOS app? i.e. Did it go through the review process successfully?

    Reply

    1. No, didn’t try that just yet, but will update when I do!

Leave a Reply

Your email address will not be published. Required fields are marked *