Your First Flutter App: An App From Scratch

macOS makes for an ideal environment for developing Flutter applications. With it, you can build applications for iOS and Android as well as web applications. Of course, in order for you to build apps, you’ll need the tooling for both iOS and Android as well as the Flutter framework. We’ll also need to setup up our emulators and simulators. Also, at the time of this recording, I’m using an intel mac. If you are using an M1 see the additional instructions linked in the author notes. In summation, you’ll need to have the Rosetta 2 translation environment available.

We’re going to install Flutter on a macOS. The first thing you do is open your browser, and head on over to the Flutter development center. You can find it at flutter.dev. Click on the blue button that says Get Started. You’ll see the install options. Click on macOS.

Now you’ll see a rather lengthy list of instructions. Now at the time you are watching this, some of the instructions may have changed so if you run into any inconsistencies following along, defer to the written instructions.

Start by downloading the stable version of flutter by clicking the blue button. Now, find the location of the flutter download. Now, the documents would have you leave the framework in your downloads directory, but I tend to purge my downloads directory after a few months. Using finder, move the Flutter folder to your home directory.

Okay, so you have Flutter added to your system, but you need to be able to access it by way of the terminal. For this, you need to alter path. First, right click your Flutter folder in finder, and choose New Terminal at Folder.

In the terminal, type the following command:

pwd

Copy the path. Now type the following to edit your terminal session.:

nano $HOME/.zshrc

Since I’m using the latest version of macOS, I’m using the Z-Shell. See the docs if you are still using bash. Once you the file editor opens, add the following line using the path that you previously copied:

export PATH="$PATH:/Users/brian/Flutter/bin"

Then save by pressing Control-O. Exit with Control-X. Now refresh the terminal by typing the following command:

source $HOME/.zshrc

Now to verify that you have Flutter installed, type the following:

which flutter

Believe it or not, that was the hard part. It seems like a pain to do all that work on the command line, but the command line provides a bunch of additional tools like Flutter doctor.

So now, you have Flutter up and running. Next up, is Xcode. I already have Xcode installed. Open the App Store. Search for Xcode. Click on the Get button. It will take awhile for Xcode to download. Note, you don’t need an Apple developer account to run apps on a device, but if you plan on doing any distributing, you will need such an account.

Once you have Xcode downloaded, open it up. You may be prompted to install additional components. Make sure to click the install button. Xcode does come with a few simulators. If you click the Xcode button, select the Open Developer Tool option. Hover over it and you’ll see a simulator option. Click that and it will launch the simulator.

Just a note, the simulator simulates a device environment. This means things may work well on the simulator but may not work on a device. It’s rare for this to happen but its does happen. When in question, always trust the device.

That’s Xcode. Now for Android Studio. Head on over to developer.android.com/studio. Click the button that reads, “Download Android Studio”. Android Studio is a powerful developer environment. It also makes for an alternative to developing Flutter apps.

Download and install Android Studio. I already have it installed, but run through the installation. It may take some time, but once you have it installed, start up the app. You’ll be prompted with a dialog. We’re not going to create a new project. Rather, click the More Actions button and select the AVD Manager option.

The AVD is your Android Virtual Device manager. This is where you can create different emulators. Whereas a simulator tries to simulate a device environment, an emulator will emulate the calls and is complete imitation of the real device. The result is your code should run like it is on a device with the downsides of it being slower.

With the dialog open, click the Create Virtual Device button. We’re going to create a phone. Choose a Pixel 5. Then select your system image. Keep in mind, you can create many different emulators. Once you are done, give it a name then click Finish. You’re emulator will be setup. To launch it, click the play button in your AVD dialog. It will take a moment, but the emulator will launch.

Last but not least is Visual Studio code. Head on over to code.visualstudio.com. Click on the Download Mac Universal button. Unzip the file and install the app. Then launch the app. At this point, you need to install the Flutter extension. Click the extension button and search for Flutter. By installing Flutter, you’ll also install the Dart extension. Once you have installed the flutter and dart extensions you are ready to go with developing Flutter apps with Visual Studio Code. If in case, you want to try out Android Studio for Flutter app development. You will also need to install the Flutter and dart plugins on Android Studio. You can find more info about it Flutter documentation’s Set up an editor section.

Now, to make sure you have a working flutter install. Go back to your terminal window and type in the command ‘Flutter Doctor’.

flutter doctor

This will analyze your flutter setup and inform you of any problems. You should investigate any problem. If you run into issues with Flutter then see the Flutter development site for assistance. At the end of the install process, you should see all green checkmarks. In my case, I have a yellow checkmark indicating that I don’t have a device plugged in. This is just a warning, so it’s okay to proceed.

Congrats on running the gauntlet. It all gets easier from here.