Problem

You have a Windows machine, and you want to start Flutter development on this machine.

Solution

Install Flutter SDK and set up Android platform on the Windows machine.

Discussion

Flutter SDK supports Windows platform. Installing Flutter on Windows is not a hard task as you may think. First of all, you need to make sure that your local development environment meets the minimum requirements. You’ll need to have 64-bit Windows 7 SP1 or later and at least 400MB free disk space for Flutter SDK to use. Flutter SDK also requires Windows PowerShell 5.0 or newer and Git for Windows to be available on the machine.

Windows PowerShell 5.0 is pre-installed with Windows 10. For Windows versions older than Windows 10, you need to install PowerShell 5.0 manually by following instructions from Microsoft ( https://docs.microsoft.com/en-us/powershell/scripting/setup/installing-windows-powershell ). You may already have Git for Windows installed since Git is a very popular tool for development. If you can run Git commands in PowerShell, then you are good to go. Otherwise, you need to download Git for Windows ( https://git-scm.com/download/win ) and install it. When installing Git for Windows, make sure the option “Git from the command line and also from 3rd-party software” is selected in the page “Adjusting your PATH environment”; see Figure 1-1.

After these minimum requirements have been satisfied, you can download the Flutter SDK zip bundles from the official web site ( https://flutter.dev/docs/get-started/install/windows ). Extract the downloaded zip file to the desired location on the local machine. It’s recommended to avoid using the system driver where Windows is installed. In the extracted directory, double-click the file flutter_console.bat to start Flutter Console and run Flutter SDK commands.

Now you can open a new PowerShell windows and type the command flutter --version to verify the installation; see Figure 1-2.

Only Android platform is supported on Windows. Continue the setup following Recipe 1-7.

Problem

You have a Linux machine, and you want to start Flutter development on this machine.

Solution

Install Flutter SDK and set up Android platform on the Linux machine.

Discussion

Flutter SDK supports Linux platform. However, given that there are many different Linux distributions available, the actual steps to get Flutter SDK installed may be slightly different. This recipe is based on installing Flutter SDK on Ubuntu 18.04 LTS.

After the installation finishes successfully, you can type commands curl and git to verify.

In the current terminal window, you need to run source ~/.profile for the change to take effect. Or you can simply create a new terminal window. Type flutter --version in any terminal window to verify. You’ll see the same output as Figure 1-2.

Only Android platform is supported on Linux. Continue the setup following Recipe 1-7.

Problem

You have a macOS machine, and you want to start Flutter development on this machine.

Solution

Install Flutter SDK and set up Android and iOS platforms on the macOS machine.

Discussion

For macOS, Flutter SDK requires several command-line tools to be available in the local environment. These tools are bash, mkdir, rm, git, curl, unzip, and which. macOS should already have these tools as part of the system. You can simply type these commands in the terminal to verify. The easiest way to install missing tools is to use Homebrew ( https://brew.sh/ ). Homebrew is also important when setting up the iOS development environment. Use brew install to install tools, for example, brew install git to install Git.

After installing required tools, we can download the Flutter SDK zip bundle from the official web site ( https://flutter.dev/docs/get-started/install/macos ). Extract the downloaded zip file to the desired location on the local machine. The flutter command is located under the bin directory of the extracted location.

To make the current terminal window use the updated PATH, you need to run source ~/.bash_profile. You can also start a new terminal window which will automatically use the updated value of PATH.

Run flutter --version in any terminal window to verify the installation. You’ll see the same output as Figure 1-2.

Both Android and iOS platforms are supported on macOS. Continue the setup following Recipes 1-4 and 1-7.

Problem

You want to develop Flutter apps for iOS platform.

Solution

Set up iOS platform for Flutter SDK on your Mac.

Discussion

To develop Flutter apps for iOS, you need to have a Mac with at least Xcode 9.0. To set up the iOS platform, you need to go through the following steps:

1. 1.

   Install Xcode ( https://developer.apple.com/xcode/ ) from App Store.

    
2. 2.

   Verify the path of the Xcode command-line tools. Run the following command to show the current path to the command-line tools. Usually you should see output like /Applications/Xcode.app/Contents/Developer.

   $ xcode-select -p

   If the path shown in the output is not the one you want, for example, you have different versions of Xcode command-line tools installed, use xcode-select -s to switch to a different path. If you don’t have the command-line tools installed, use xcode-select --install to open the installation dialog.

    
3. 3.

   You need to open Xcode once to accept its license agreement. Or you can choose to run the command sudo xcodebuild -license to view and accept it.

    
4. 4.

   Flutter SDK requires other tools for iOS platform, including libimobiledevice, usbmuxd, ideviceinstaller, ios-deploy, and CocoaPods ( https://cocoapods.org/ ). All these tools can be installed using Homebrew. If you run the command flutter doctor, it shows the commands to install these tools using Homebrew. Simply run these commands and use flutter doctor to check again. When you see the green tick of “iOS toolchain,” the iOS platform is set up successfully for Flutter SDK to use; see Figure 1-3 for a sample output.

    

Problem

You need a quick way to test Flutter apps on iOS platform.

Solution

Set up the iOS simulator.

Discussion

When the simulator is opened, you can switch the combination of different devices and iOS versions using the menu Hardware ➤ Device.

After the simulator is started, running flutter devices should show the simulator.

Problem

You have finished the testing of your Flutter apps on iOS simulator, and you want to test them on real iOS devices.

Solution

Deploy Flutter apps to iOS devices.

Discussion

Before deploying Flutter apps to iOS devices, you need to run flutter doctor to verify that iOS toolchain is set up correctly. To develop and test Flutter apps on devices, you need to have an Apple ID. If you want to distribute apps to App Store, you also need to enroll Apple Developer Program.

The first time you connect a physical device for iOS development, you need to trust the Mac to connect your device. Flutter apps need to be signed before deploying to devices. Open the ios/Runner.xcworkspace file of the Flutter app in Xcode. In the General tab, select the correct team in the Signing section. If you select the connected device as the running target, Xcode will finish the necessary configurations for code signing. The Bundle Identifier must be unique.

The Flutter app can be deployed to the device using Xcode or the command flutter run. The first time you deploy the app, you may need to trust the development certificate in General ➤ Device Management of the Settings app on the iOS device.

Problem

You want to develop Flutter apps for Android platform.

Solution

Install Android Studio to set up Android platform on your local machine.

Discussion

To develop Flutter apps for Android platform, we need to set up Android platform first. Flutter SDK requires a full installation of Android Studio for its Android platform dependencies, so we have to install Android Studio.

Go to Android Studio download page ( https://developer.android.com/studio/ ) and click the “DOWNLOAD ANDROID STUDIO” button. You need to accept the terms and conditions to download it. The download page checks your platform and provides the most suitable version to download. If the provided option is not what you want, click the “DOWNLOAD OPTIONS” and select from the list of all download options; see Figure 1-5.

Android Studio provides a GUI-based installer, so it’s very easy to get it installed and running on the local machine. Installing Android Studio also installs Android SDK, Android SDK platform tools, and Android SDK build tools. Even you choose not to use Android Studio as the IDE, Android SDK and related tools are still required for Android development.

In the Android SDK page of preferences in Android Studio, you can also install additional Android SDK platforms and tools; see Figure 1-6. Android Studio also prompts available updates to installed Android SDK platforms and tools.

Problem

You need a quick way to test Flutter apps for Android platform.

Solution

Set up the Android emulators.

Discussion

When developing Flutter apps, you can run them on Android emulators to see the results of running apps. To set up Android emulators, you can go through the following steps.

Open an Android project in Android Studio and select Tools ➤ Android ➤ AVD Manager to open AVD Manager and click “Create Virtual Device…”; see Figure 1-7.

Choose a device definition, for example, Nexus 6P, and click Next; see Figure 1-8.

Select a system image for the Android version you want to emulate and click Next; see Figure 1-9.

Select Hardware - GLE 2.0 for Emulated Performance to enable hardware acceleration and click Finish; see Figure 1-10.

A new AVD is created and listed in AVD Manager. Android Studio official web site provides a comprehensive guide ( https://developer.android.com/studio/run/managing-avds ) on how to manage AVDs, if you want to know more details about AVD configurations.

In the AVD Manager, click the green triangle button to start the emulator. It may take some time for the emulator to start up and show the default Android home screen.

Problem

You have finished the testing of your Flutter apps on emulators, and you want to test them on real Android devices.

Solution

Set up your Android device to run Flutter apps.

Discussion

The Flutter app can be deployed to the device using Android Studio or the command flutter run.

Problem

You have already set up your local environment to develop Flutter apps. Even though using Android Studio or VS Code is a good choice for development, you may still want to know how to do this from command line.

Solution

Use the commands from Flutter SDK to create and build Flutter apps.

Discussion

Using tools like Android Studio and VS Code can make Flutter development much easier. However, it’s still valuable to know how to build Flutter apps using the command-line tools. This is important for continuous integration. It also allows you to use any other editors to develop Flutter apps.

This command creates various files in the specified directory as the skeleton code of the new app. Navigate to the directory flutter_app and use flutter run to run this app.

Problem

You want to have a powerful IDE that meets most of the requirements when developing Flutter apps.

Solution

Use Android Studio to create Flutter apps.

Discussion

Since we already have Android Studio installed to set up Android platform for Flutter SDK, it’s a natural choice to use Android Studio as the IDE to develop Flutter apps. Android Studio itself is a powerful IDE based on IntelliJ platform. If you have used other products from JetBrains, like IntelliJ IDEA or WebStorm, you may find it’s quite easy to get started with Android Studio.

To use Android Studio for Flutter development, Flutter and Dart plugins are required. To install these two plugins, open the Plugins page in Preferences dialog of Android Studio and click the “Browse repositories…” button. In the opened dialog, type in “Flutter” to search for the Flutter plugin to install; see Figure 1-11. Click the green Install button to install it. This will also prompt you to install the Dart plugin. Click Yes to install that as well. Restart Android Studio.

After restarting Android Studio, you should see a new option to start a new Flutter project. The wizard for Flutter projects has different pages to configure the new project.

The first page allows you to select type of the new Flutter project. The description in the page shows the difference of these four different project types. Most of the time, we are going to create a Flutter Application.

The second page allows you to customize basic configurations of the new Flutter project, including project name, location, and description.

The last page allows you to customize some advanced project configurations. The company domain is used to create unique identifier for the project.

After finishing the wizard, a new project is created and opened in Android Studio.

Problem

You want to use a light-weight editor to develop Flutter apps.

Solution

Use VS Code to create Flutter apps.

Discussion

VS Code ( https://code.visualstudio.com/ ) is a popular light-weight editor in the community of front-end developers. With the extensions for Flutter and Dart, we can also use VS Code for Flutter development. Open the Extensions tab in VS Code and search for “flutter” to install the Flutter extension; see Figure 1-15. Flutter extension depends on the Dart extension, which will also be installed. After installing these two extensions, we can open the command palette and search “flutter” for available Flutter commands.

To create a new Flutter in VS Code, open the command palette and run the Flutter: New Project command. Input the name of the new project in the opened dialog. Select the directory of the project. VS Code opens a new window for the newly created project.

Problem

You want to run Flutter apps on emulators or devices.

Solution

Use flutter run command or IDEs to run Flutter apps.

Discussion

Depending on your preferred approach to develop Flutter apps, there are different ways to run Flutter apps. Before running Flutter apps, you must have at least one running emulator or connected device:

• The command flutter run starts the current Flutter app.

• In Android Studio, select the emulator or device from the dropdown menu shown in Figure 1-16, then click the Run button to start the app.

• In VS Code, select Debug ➤ Start Without Debugging to start the app.

Problem

You want to know the typical structure of Flutter apps.

Solution

Go through the sample app generated by Flutter SDK and understand the files.

Discussion

Problem

You want to make sure the configuration of your local development environment is correct for Flutter development.

Solution

Use the command flutter doctor.

Discussion

After Flutter SDK is installed, it needs to be configured with other supporting tools. The command flutter doctor is the primary tool to provide necessary help. This command checks the local environment and reports status of the Flutter SDK installation. For each problem it finds, it also gives instructions on how to fix them. All you need to do is to apply the suggested fixes and run flutter doctor again to verify the result. It’s not necessary to fix all issues reported by flutter doctor. You can safely ignore some issues if they are not relevant. For example, if you are not going to use VS Code as the primary IDE, then it doesn’t matter if VS Code is installed or not.