How to install and setup Flutter to run your first App

> using Android Studio on Windows

Without diving too much into technical the mumbo jumbo, Flutter is a UI (User interface) development kit created by Google. It allows you to make apps for Android, iOS, Web, Windows, macOS and Linux. All this is achieved from a single code base!

You can Know more about Flutter here.

System Requirements —

1. Operating system -Windows 7 or later
2. Disk space -400 MB (But I recommend having at least 10 GB of free space)

#1 — Install the Flutter SDK

• Download and Install Git.

The setup is easy. Just click “Next” and install everything according to the default options.

• Download the Flutter SDK.

Press the big blue button that says something like — ‘flutter_windows_1.1x-stable.zip’. A zip file will start downloading. Now, flutter recommends that we extract this somewhere in the C-Drive where it is easily accessible.

Extract the .zip file to —

C:\src\flutter

Make sure you copy the exact path from the snippet above. Extracting it somewhere else might lead to troubles gaining access due to elevated privileges.

• Update your PATH variable

Now that you have installed flutter, you want to introduce it to your pc (😛).

To do this, type ‘env’ in your search bar. Select — ‘Edit the system environment variables for your account’. Something like this will show up —

Select Path and click on Edit. If a Path variable does not exist in your pc, just click new and create one with the name “Path”.

Now click on New and paste the following —

C:\src\flutter\flutter\bin

Congratulations! 🙌 You have installed Flutter on your desktop. Just to ensure that everything you did is running, search for ‘command prompt’. A black window with some spooky stuff written on it should appear. Type in —

flutter — version

Hopefully, you see something similar to this —

(if you don’t, try retracing above steps and be extra careful with the Path variable and .zip file extraction)

#2 — Install a code editor

There are two editors that you can use to start programming in Flutter —

• Android Studio
• VS Code

Though both are similar in the majority of aspects, I recommend using Android Studio for Flutter development because it has added compatibility with AndroidX, Jetpack etc. You can proceed with VS Code if you have some personal preference, but I’d recommend using Android Studio specifically for Flutter.

Go ahead and download Android Studio.

Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android. It’s a little weird that you download a software and then have to download some more stuff but it’s just this once.

Now, open Android Studio and you’ll see a screen similar to that below. Click on — Configure >> Settings

Now in Settings, go to Plugins and search for “Flutter”. Install the first option — Flutter (by flutter.dev). This will initiate a pop-up that essentially asks you if you want to install Dart as well. Select ‘yes’ and proceed. You might need to restart Android Studio when the plugin installation is complete.

Dart is the programming language that is used to build Flutter apps. You can know more about Dart here.

Hurray! 🙌 We’re all done with installing and setting up our Flutter programming environment. Now let’s run our first app!

#3 — Running your first Flutter app!

On restarting Android Studio, you’ll see a new option — “Start a new Flutter project” and on the next screen, select — “Flutter Application”.

On the next screen, let’s start by naming our app. I’ve named it “test_app” but if you’re cooler than me, you can try something like ‘glitchy_robot’ 😏. Given that your first (app) is going to be special 😚.

Also, make sure that the Flutter SDK Path matches —

Android Studio is smart enough to pick up the exact SDK Path, but if it doesn’t, there’s a chance you might have made an error in the ‘Update your Path variable’ step. Revisit that step and make sure you follow the given procedure.

C:\src\flutter\flutter

Now you will see something called package name with an odd format, something like — com.example.glitchy_robot.

You can change it to ‘com.lordVoldemort.glitchy_robot’ for all I care, just make sure the ‘com.’ and ‘.glitchy_robot’ parts remain constant.

Click ‘Finish’ and voila! 🙌 You have your first Flutter app!

You’ll see a file named ‘main.dart’ that is opened with a bunch of pre-existing code. I know that the code looks really daunting at first but as you progress with learning Flutter, you’ll realise it’s pretty easy and basic.

Installing the Android Emulator

Now you have a bunch of code which I claim to be an app. But the question is how would you know what app it is and what does the existing code do?

The answer’s fairly easy — you’ll have to run the app and see for yourself.

But if it is an app, it’ll require some kind of a device, right? An Android phone or an iOS maybe?

Yes, we need a device. But we don’t necessarily need a physical Android or iOS device. We can run our apps on an Emulator. An emulator essentially gives us an Android or iOS device on our computers itself to test and run our apps.

( Note:- Although Flutter apps work on both Android and iOS, running your apps on an iOS emulator requires a macOS and this article is about Windows. So, we’ll stick to the Android Emulator.

If you have access to a macOS, you can see how to run your app on iOS emulator here. )

To download the Android emulator, click on the icon in the circle (refer above picture) with the small Android logo on a mobile phone. That is the AVD Manager or the Android Virtual Device Manager.

Now, when you ‘Create Virtual Device’, you’ll be presented with a variety of devices. I recommend — Pixel 3 or Pixel 3 XL.

Next, under ‘Select a system image’ — Download the latest Android OS version (“R” as of this article) and proceed to the next screen.

Now, before you finish, make sure you change the Graphics to Hardware. This makes our emulator run super fast ⏩.

We are finally done with all the downloading, installations and other super boring stuff 🙇 to finally be able to run our app!

To do that, in the AVD Manager, click on the play button beside your newly installed Android emulator device. This might take a few minutes.

When the emulator loads and the OS is switched on, you have your device to run the app on. Select your emulator device in the ‘choose device’ drop-down and hit the green coloured Play button (refer image below).

After a bunch of random lines pop at the bottom of your screen under a tab named ‘Run’.

You can test the functionality of the app and see it’s working.

Yayyy 🙌 💮! You have done it! Your first-ever Flutter app is now running.

You now have all the tools and resources to begin this exciting and fun journey of app development using Flutter.

All the best guys!

If you come across any hurdles while building apps and need some help, don’t hesitate to contact me at — kaustubh8g@gmail.com

(P.s. Begin the subject of your email with FLUTTER )

P.p.s — I was thinking of starting a series where-in I’ll teach you to build apps with Flutter. I know there already quite a few courses and resources and I’m sure they are all pretty comprehensive. But, we’ll do something different.

The biggest challenge with teaching yourself to code isn’t that you have to find all the answers yourself. It’s maintaining the motivation and discipline to sit down and learn and practice regularly.

If you struggle with motivating yourself or lose interest after an initial burst of enthusiasm, I have the solution for you.

In this course, I plan on taking a top-down approach.

What do I mean by top-down?

It means that we’ll take a macro approach to learning instead of the usual micro approach. That is instead of learning from small topics and moving onto bigger concepts and then applying all of it at the end, we’ll do the exact opposite of that.

I believe in learning by applying. For example, instead of finally building our rocket, we’ll decide to build a rocket. Then we’ll divide the process into small achievable targets. And then learn and build 1 small part of the rocket at the end of every class and at the end, we have a fully functioning rocket!

Now, the analogy might not be the most appropriate one but you get the point.

Of course, all this will be free and I’ll maybe teach on Medium or Youtube (I’m yet to decide). Also, I’ll be personally guiding and mentoring you guys :)

Let me know what you think and do reach out to me at — kaustubh8g@gmail.com

(I would love to hear your suggestions to improve my teaching methods 😄)