Flutter Create: A back-end dev gets Flutter running for the first time

Our company, Posse, is all-in on Flutter — Google’s rapidly emerging multi-platform mobile development framework. We built the biggest and most successful Flutter app so far — the flagship app for the Broadway musical Hamilton.

But I have a little secret — I haven’t installed Flutter or written a line of Dart code until right now!

I should caveat by saying that my team has been working extensively with Flutter and Dart for nearly a year. It just so happens that I’m a server-side guy, so I haven’t had much opportunity to dig into Flutter yet.

So, let’s see if someone who is more comfortable with Node/Ruby/Go, deploying to servers, using the command line, and thinking in “routes” can get Flutter running and make a useful mobile app before my kid wakes up from her nap…

TL;DR

Just do the following and if all works you can run Flutter. If something fails or if you want to always load Flutter into your path, or if you just like reading long articles, then read the rest below.

$ cd the/directory/i/want/to/clone/flutter/into
$ git clone -b dev https://github.com/flutter/flutter.git
$ flutter doctor 
$ flutter create
$ flutter run

But, you’ll probably see issues from flutter doctor, so you may at least want to checkout out section 4 below. Otherwise congrats, you’re building with Flutter!

Expectation Setting

First, let’s get something straight. We’re about to install software that allows us to build apps for both iOS and Android from a single codebase. So in order to build 2 apps, we’ll actually need 3 distinct sets of tooling (iOS/XCode, Android Studio, and Flutter/Dart). So it’s a lot of stuff. But the end result is that we’ll have to do a lot less going forward to be on both iOS and Android.

Before We Get Started

To get started, I’ll be looking at the official Flutter install guide, but I’ll also be following our friend Seth Ladd’s install guide as well.

I’ll be doing this on macOS. In fact, a comparatively underpowered 12" MacBook.

Seth advises having git installed. ✅

The Flutter Install Guide says we will need to do the following:

1. Verify your system meets the requirements for Flutter and dependencies
2. Clone the Flutter repo
3. Update your path
4. Run flutter doctor and resolve any issues found
5. (Optional) Perform Android setup tasks to develop apps for Android
6. (Optional) Perform iOS setup tasks to develop apps for iOS
7. (Optional, omitted here) Install and configure an IntelliJ IDE to develop Flutter apps

1. Verifying System Requirements

Fluter says we need:

• Operating Systems: macOS (64-bit)
• Disk Space: 700 MB (does not include disk space for Xcode or Android Studio).

Really, you’ll need several GBs at least. 700MB for Flutter alone is no joke, but I will also need to install Android Studio, the Android SDK, Xcode and various developer tools, the Dart SDK, and I’ll likely install IntelliJ too. It’s something to keep in mind if you’re just experimenting with Flutter and mobile development in general.

• bash, mkdir, rm, git, curl, unzip, which

Nothing out of the ordinary here. You probably have all these already. If you’re not familiar with git, you should probably just stop right here and go install it, create a github account, get familiar with git, and probably not get into Flutter year :-)

My machine is good to go: ✅

2. Clone the Flutter repo

Alright, so after opening a new terminal window, I’m going to do the following:

$ cd the/directory/i/want/to/clone/to
$ git clone -b dev https://github.com/flutter/flutter.git

✅ done & done

3. Update your PATH

In case you’re wondering “WTF is PATH?” — “PATH is an environmental variable in Linux and other Unix-like operating systems that tells the shell which directories to search for executable files (i.e., ready-to-run programs) in response to commands issued by a user.”

Setting PATH will allow use to do things like flutter doctor and flutter create and flutter run and so on.

Now, the docs say to just do a simple export of PATH like this:

$ export PATH=`pwd`/flutter/bin:$PATH

That’s fine for now. But, that’s just temporary for a single running Terminal window. I don’t want to do that every time I use Flutter, especially since it’s likely that I’ll be using Flutter again so I’m going to go ahead and make it more permanent.

Adding Flutter to PATH in Bash Profile

This assumes you’re using Bash.

First, we need to remember where we cloned the Flutter SDK. I cloned it in ~/Developer/vendor/

Next, we need to open our .bash_profile file, which for me is at ~/.bash_profile and I will open it using Atom. You can open the file with whatever editor you like.

$ atom ~/.bash_profile

At the bottom of the file, I’m going to add the following export command. Then, I’ll save and close the file.

export PATH=~/Developer/vendor/flutter/bin:$PATH

Note you should replace ~/Developer/vendor with whatever the path is to where you cloned the Flutter SDK.

Lastly, we need to reload the /.bash_profile so we can either open a new Terminal window which will reload our bash_profile or run:

$ source ~/.bash_profile

Finally, we can confirm all’s ok by running echo $PATH and confirming that the correct flutter/bin is in our path.

Mine looks good: ✅

4. Flutter Doctor 👩‍⚕️

Alright! We can run flutter commands. So let’s do:

$ flutter doctor

Ok, so what did flutter doctor do?

1. It downloaded the Dart SDK (about 83MB)
2. It built the “flutter tool”
3. It let me know that it will be tracking anonymous usage stats and crash reports. Fine, and I can disable by doing flutter config --no-analytics
4. Downloaded a ton of other stuff it needs
5. Runs checks to ensure I have everything I need

And here at step 5, I have issues: ❌

Alright, so four issues. I’m not surprised since I’ve never used this computer to develop for iOS and Android. So I have some more work to do.

5. Android Toolchain / Android Studio

First thing I need to do is download Android Studio. After waiting for 734MB to download, I can install it. It’s 1.21GB installed. At each of the prompts, I just hit Next or picked the default option.

Well, crap.

Looks like High Sierra’s security settings doesn’t like HAXM. So, let’s see if we can fix it.

I followed the instructions of the pop-up, went to my Security & Privacy settings and clicked Allow next to ‘System software from developer “Intel Corporation Apps” was blocked from loading.’ I mean Intel is trustworthy right? I haven’t heard of any major security issues coming from their stuff. Oh waaaaaait. Jk.

I hit Allow, then went back to the installer, which now gives me a “Finish” button. Hooray!

Re-run flutter doctor and it looks like all the Android stuff is good to go. We can move on to iOS stuff now.

Android Studio: ✅

6. iOS Toolchain

First off, I already had Xcode installed. If you don’t have Xcode, you’ll need to install it. For this just follow the official Flutter docs.

But things also get a little squirrelly from here.

I work at an agency that focuses primarily on mobile apps. So I know a fair amount about Xcode and dealing with Apple. First thing’s first, if you want to put out an iOS app, right now you should just go over to https://developer.apple.com/ to create an account and buy an Apple developer license. Note: if you didn’t put in a credit card and pay at least $99, then you didn’t complete this step.

While I had Xcode installed, I hadn’t actually ever opened it on this computer apparently. So I did, it installed some developer tools, then I signed into my Apple developer account in my Xcode Settings -> Accounts.

My thinking was that opening Xcode would solve all my problems, like installing and opening Android Studio did. Not so.

After opening and signing in to Xcode, I ran a project (I happened to have one available) and ran it in the simulator.

Then I re-ran flutter doctor and I knocked off one of the issues, but not all of them.

It looks like Simulator counts as a “connected device”, so that issue is now resolved as long as Simulator is running.

Connected devices: ✅

But it looks like I still have quite a bit of work to do for iOS. So, what is all this stuff that flutter doctor is telling me to do.

DevToolsSecurity

It says:

Your Mac needs to enabled for developer mode before using Xcode for the first time.
Run 'sudo DevToolsSecurity -enable' to enable developer mode.

Well, that’s a bit confusing. I just opened Xcode and it is definitely not the first time. I found an issue about this raised by the Flutter team, so I guess manually putting the Mac into developer mode is just required to make the doctor pass.

@flutterio perhaps the messaging here could be clearer because it’s a tad confusing

Anyway, I run sudo DevToolsSecurity -enable and entered my password. After a “Developer mode is now enabled.” After re-running flutter doctor that one is now gone.

libimobiledevice, ideviceinstaller, and ios-deploy

Ok what are these?

We’ll need these if we actually want to deploy to a physical device. So while not really required at this point and the official Flutter docs have info about running against the Simulator, I think we might as well just tackle this now.

Well, libimobiledevice is “a library to communicate with services of Apple iOS devices using native”.

And, ideviceinstaller is “a tool to interact with the installation_proxy
of an iOS device allowing to install, upgrade, uninstall, archive, restore
and enumerate installed or archived apps.”

And, ios-deploy’s description says: “Install and debug iOS apps without using Xcode. Designed to work on un-jailbroken devices.” The fact that it’s a library from PhoneGap makes me feel a little dirty.

I guess we need these for Flutter to do its thing. So…

$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller
$ brew install ios-deploy

Once that’s all done, we only have one left.

CocoaPods

I’m already familiar with this, but if you’re not, CocoaPods is a dependency manager for Objective-C and Swift (i.e., iOS development). It’s like npm or RubyGems for iOS.

Flutter offers some very clear info about why we need this…

“CocoaPods is used to retrieve the iOS platform side’s plugin code that responds to your plugin usage on the Dart side. Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS. For more info, see https://flutter.io/platform-plugins”

I think my favorite line is “usage on the Dart side”.

Ok, then…

$ brew install cocoapods
$ pod setup

Re-run flutter doctor and look at that…

We’ve passed with flying colors: ✅

Hooray! Let’s create and run a Flutter app

First we need to create our app. In Terminal, we’ll navigate to somewhere we want our project to live, then do:

$ flutter create first_app
$ cd first_app

Before we can run our app, we need to ensure we have a connected device. We set things up so we can use a physical device, but for now, let’s just use the iOS Simulator.

You can open it from the command line with open -a Simulator or in Xcode you can open Simulator by going to the menu Xcode -> Open Developer Tool -> Simulator

The we run our new app:

$ flutter run

We did it! We now have a Flutter app running on an iOS Simulator!

To get an Android emulator running, I’ll point you over to Seth’s great article where he’ll guide you through Android Studio.

Now it’s time to actually really build something. But we’ll save that for another post.

About Posse
Posse is a NYC-based multi-platform design and development studio that works with great companies to create amazing apps. Posse was the first to launch a major commercial app using Flutter.

Contact us about your digital project.

Interested in learning more about our apps? Check out some of our case studies.