Setup

Overview

We won’t build a Flutter application from start to finish in this book, at least not in the typical sense of building a complete app. Instead, we will create basic applications, which we will use to explore various examples of how to work with layouts, place widgets, and create user interfaces.

If you would like to explore how to create a Flutter application from start to finish, the Succinctly series has you covered with Flutter Succinctly, which is a good resource to get up and running quickly with Flutter.

Knowing Flutter is not a prerequisite for following along with the concepts that will be covered throughout this book. This book is more of a complement to the previous book, specifically focusing on user interface concepts, which weren’t fully covered in Flutter Succinctly.

Installation

Getting Flutter installed is incredibly easy, given that the installation steps are well documented within the official Flutter documentation site.

I’ll be using Windows 10, so I’ll be describing setup steps and information related to this operating system, but there are also easy-to-follow setup guidelines for both macOS and Linux.

On Windows, some essential system requirements need to be in place, which include having PowerShell 5.0 or later and Git for Windows 2.X or later installed.

Flutter relies on a full installation of Android Studio, as it requires access to all Android platform dependencies. You’ll also need to set up an Android device emulator—this is described step by step in the official documentation.

With the prerequisites in place for Windows, all we need to do is download the installation bundle of the Flutter SDK. At the time of writing, it is Flutter’s 1.22.6 stable version for Windows.

Once you’ve downloaded the zip file, extract it to a folder within your hard drive, such as C:\Flutter. To make your life easier, I suggest that you not extract the Flutter files to C:\Program Files or C:\Program Files (x86), which require elevated or admin permissions.

Once the files are in the desired folder, locate the file flutter_console.bat. This is how it looks on my machine.

Figure 1-a: The Flutter SDK Files

In principle, you are now ready to run the Flutter console by executing the flutter_console.bat file. It’s recommended (although not strictly necessary) to add the flutter\bin folder to the Path environment variable in Windows.

If you are unsure how to add a folder to the Windows Path variable, please refer to this article that explains how to do it step by step, with screenshots. On my machine, this looks as follows.

Figure 1-b: Flutter Added to the Path Variable in Windows (Highlighted in Green)

Notice as well that the paths to the Dart and Android SDKs (highlighted in blue in Figure 1-b) should also be added to the environment variables.

Figure 1-c: The Flutter Console Running

At the prompt, type the following command to check if Flutter is fully operational.

Code Listing 1-a: The “flutter doctor” Command

When executing this command, if some updates are available; they will be downloaded and installed accordingly.

Figure 1-d: The Flutter Console Running (Continued – Installing Updates)

After you execute this command, you will get a result with any issues found. In my case, because I had previously installed Android Studio and Visual Studio Code, I get the following information.

Figure 1-e: The Flutter Console Running (Continued – Results)

Notice that after running this command, I have two issues. In my case, these are irrelevant because I’ll be using Visual Studio Code (VS Code) as my Flutter development environment, instead of Android Studio. It is also highlighted that I don’t have a physical device connected, which is fine for now.

If you prefer using Android Studio, make sure you have the Flutter and Dart plugins installed. All the information on how to install both plugins for Android Studio can be found here. When you run the Android Studio installer, please make sure you follow the official documentation so that you end up with a successful Android Studio and SDK setup.

Make sure that you resolve all the conflicts highlighted by the flutter doctor command before proceeding.

Setting up an editor

Once you have completed all the installation steps, it is necessary to set up Flutter to work with your editor of choice. In my case, I’ll be using Visual Studio Code. If you would like to know how to use Android Studio as your editor of choice, then feel free to check Flutter Succinctly, which explains how to do this.

Alternatively, the official Flutter documentation describes how to configure Android Studio (IntelliJ) to work with Flutter, so feel free to check our those steps.

For Visual Studio Code, the steps are quite simple. First, go to View > Extensions.

Figure 1-f: The Extensions Option

Type Flutter in the search box, select the Flutter option, and then click Install.

Figure 1-g: The Flutter Extension

Once the Flutter extension has been installed, you might be asked to reload Visual Studio Code.

Next, run the flutter doctor command to make sure that everything is working as expected. If all is good, you are ready to create a Flutter project.

Creating the app

Once your editor of choice has been correctly set up following the official documentation guidelines and my previous suggestions (in my case using Visual Studio Code), it’s time to create a new Flutter project, which we will use throughout the rest of this book.

Creating a new Flutter project with Visual Studio Code is easy. All you need to do is go to View > Command Palette > Flutter: New Application Project.

Figure 1-h: The Flutter New Application Project Option

You’ll be asked to select the folder where you would like to save your project files, and then to provide a name for your Flutter application. I’ll name my application flutter_ui.

Once the project has been created, you’ll see under the project files within the Explorer view of Visual Studio Code, which in my case looks as follows.

Figure 1-i: The New Flutter Project

The process of creating a new Flutter project with Android Studio is slightly longer than with Visual Studio Code (more steps are required). If you would like to explore this route, Flutter Succinctly covers this option in depth.

Before we can run the newly created Flutter project, we need to make sure we have a virtual device created and ready.

Creating a virtual device

Let’s quickly go over the steps required to create a virtual device, which can only be done with Android Studio.

Figure 1-j: The Android Studio Welcome Screen

On the welcome screen of Android Studio, go to Configure > AVD Manager, which will display the following screen.

Figure 1-k: The Android Studio Virtual Device Manager (Your Virtual Devices)

You can see that I have a virtual device created. To create a new one, click Create Virtual Device, which will display the following screen.

Figure 1-l: The Android Studio Virtual Device Manager (Select Hardware)

At this stage, choose the device that you would like to emulate (such as Pixel 4 XL), and then click Next. This will display the operating system images available.

Figure 1-m: The Android Studio Virtual Device Manager (System Image)

It’s important to choose an image that plays nicely with your computer’s host operating system. In essence, it’s not recommended, for emulator performance reasons, to choose an ARM-based image if your computer’s host operating system is based on an x86 architecture.

If you’ve chosen a different image than the one I have highlighted in Figure 1-m, you might have to download the image by using the download link next to the Release Name.

Once the image has been selected (and downloaded, if applicable), click Next to continue with the last step.

From the list, choose any of the most recent API Level versions, and then click Next. This will show a screen to verify the configuration, before creating the image.

Figure 1-n: The Android Studio Virtual Device Manager (Verify Configuration)

You can use the default configuration settings. To finalize the creation of the virtual device, click Finish.

Awesome—you now have created a virtual device. You can create more than one if you wish, as it might help you test your application with multiple devices. The virtual device I have created looks as follows.

Figure 1-o: Virtual Device – Android Emulator

Testing your setup

With our virtual device in place, it’s now time to run the application we have created and see what it does. This is the default demo app that comes out of the box with Flutter.

To do that, all we need to do in Visual Studio Code is go to Run > Run Without Debugging.

Figure 1-p: Running the App Without Debugging – Visual Studio Code

If you are using Android Studio, select the Open Android Emulator option from the Android SDK built for x86 dropdown menu (which is next to the Run button). You’ll be able to execute the application when you click Run, once the Android emulator is opened.

Figure 1-q: The Emulator Dropdown and Run Button – Android Studio

Since I’ll be using Visual Studio Code, I’ll be focusing entirely on VS Code instead of testing the app with Android Studio.

After clicking the Run Without Debugging option in VS Code, the following options are presented. In our case, we need to select Dart & Flutter.

Figure 1-r: Select Environment Options – Visual Studio Code

You will be asked to choose the virtual device to use.

Figure 1-s: Select Device Option – Visual Studio Code

Within that list, the virtual device that was recently created should be shown. If the device is shown on the list, simply click on it to start the emulator.

In my case, my virtual device is a Pixel XL API 27 emulator, so I’ll click the Start Pixel XL API 27 mobile emulator option. Doing so will open the emulator with the application running, which we can see as follows.

Figure 1-t: Default Flutter App Running

Summary

Throughout this chapter, we’ve had a look at how to get our Flutter development environment ready. Now that our environment is set up, we are now ready to start exploring how to work with layouts and Flutter UI widgets. This is what we’ll do in the next chapter.