Your First Flutter App: An App From Scratch

Installing the Flutter Development environment is much easier on Windows than other platforms, but unfortunately, you can only develop and test for Android apps. If you want to develop for iOS, you’ll need a mac. Now, there are other ways to build an iOS app in the case that you don’t have a mac, but that’s beyond the scope of this course.

Do note, at the time of this recording, I’m using Windows 10 to install Flutter. By the time you are watching this, Windows 11 will have been probably released. If you are installing on Windows 11, make sure to check the official documentation.

Let’s get started.

We’re going to install Flutter on a Windows. 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 Windows.

Now you’ll see a rather lengthy list of instructions. Remember, if something doesn’t work when following the demo, defer to the official documentation.

Start by downloading the flutter SDK by pressing the blue button. Navigate to the zip file and unpack it. At this point, drag it to place on your hard drive. I’m going to place it in the root directory of Windows.

Next I need to add the path to Flutter. In the start menu, type env and select the Edit environmental variables. Under user variables, look for a path entry. If you don’t see one called Path, then click the add button to add an entry. Otherwise, select the entry and click edit. Add the path.

C:\flutter\bin

Now click okay. At this point, launch the start menu and type cmd. Click on the command app to launch the terminal. Now, test out flutter by typing the following.

flutter --version

Next up is 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. It may take some time, but once you have it installed, start up it up and finish the installation. Once done, 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. 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 download and select your system image. Under emulated Performance, select Hardware - GLES 2.0. to enable hardware acceleration. Keep in mind, you can create many different emulators. Once you are done, give it a name then click Finish. Your 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.

Next up, we need to install the Java Development Kit. Open up your browser, and search for the Java Development Kit. You should be brought to a download page. Choose a platform for installation then download and run the installer.

Now for Visual Studio code. Head on over to code.visualstudio.com. Click on the Download for windows button. Run the installer. 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. In our case, we’re getting a couple of errors. We need to do two things. First we need to install the Android command line tools and the second is we need to accept the licenses.

Return back Android Studio and select the SDK Manager. Choose the SDK Tools tab then check the Android SDK Command Line Tools option. Return back to the terminal. We’ll clear up the screen by typing cls.

Next, run the following command.

flutter doctor --android licenses

Review and accept all the licenses. Finally, run flutter doctor one last time.

At the end of the install process, you should see all green checkmarks. If you run into issues with Flutter then see the Flutter development site for assistance. Congrats on running the gauntlet. It all gets easier from here.