01 Pre-study Chapter Starting from Zero Setting Up Flutter Development Environment #
Hello, I’m Chen Hang.
As the saying goes, “A workman must sharpen his tools if he is to do his work well.” Any learning of new technologies or languages requires starting from the very basics of setting up the development environment, and learning Flutter is no exception. Therefore, as the first article of this column, I will guide you step by step through the configuration of the Flutter development environment and demonstrate how a Flutter project runs on both Android and iOS simulators and actual devices through a demo. If you are already familiar with this part, you can skip this preparatory article and proceed directly to the subsequent content.
Since Flutter is a cross-platform development framework, in order to facilitate debugging, you need an operating system that supports running Android and iOS, which is macOS. Therefore, the following content primarily focuses on how to configure the Flutter development environment on macOS.
If you don’t have a macOS computer, it’s okay. Configuring Flutter on Windows or Linux is similar in method, and I will also highlight some key differences. However, in this case, you will only be able to develop and debug on the Android platform.
Preparations #
Installing Android Studio #
Android Studio is the official Android integrated development environment (IDE) based on IntelliJ IDEA.
We can find the latest version (as of the writing of this article, the latest version is 3.4) on the official website. After downloading, we can start the installation file and follow the system prompts to install the SDK and configure the project.
After configuration, we open the AVD Manager, click the “Create Virtual Device” button to create a Nexus 6P emulator. With this, the installation and configuration work of Android Studio is complete.
Installing Xcode #
Xcode is the official Apple IDE for iOS and macOS app development. Its installation process is very simple. We can directly search for Xcode in the App Store on a macOS system and then install it.
After installation, we can find the Xcode icon in Launchpad. Open it and follow the prompts to accept the Xcode license agreement and install and configure the components.
After configuration, we open Terminal and enter the command open -a Simulator to open the iOS simulator and check the settings in the Hardware > Device menu, and try switching between different simulators.
With this, the installation and configuration work of Xcode is successfully completed.
Installing Flutter #
The Flutter official website may not be stable in China, so the Google Developer Community (GDG) in China has set up a temporary mirror site for us to download the necessary resources using the Flutter command-line tool.
Next, we need to configure the environment variables for the mirror site. For macOS and Linux systems, open the ~/.bash_profile file using a text editor and add the following code at the end to configure the environment variables for the mirror site:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
For Windows systems, right-click on the computer icon, choose Properties, then Advanced System Settings, Advanced, and Environment Variables. Create a new user variable called PUB_HOSTED_URL with the value https://pub.flutter-io.cn, and create another variable called FLUTTER_STORAGE_BASE_URL with the value https://storage.flutter-io.cn. Restart your computer to complete the configuration.
With this, we have completed the configuration of the mirror site.
However, since GDG is not an official organization, the Flutter team cannot guarantee the long-term availability of this service. But don’t worry, you can follow the Flutter community Using Flutter in China to find other available mirror resources and update the environment variables as needed.
Next, we go to the Flutter official website to select and download the latest stable version (as of the time of writing this article, the latest stable version is 1.5).
Next, extract the downloaded zip file to the directory where you want to install Flutter, such as ~/Documents or C:\src\flutter. To be able to execute the flutter command in the command line, we also need to configure the environment variables.
For macOS and Linux systems, edit the ~/.bash_profile file and add the following code at the end to append the path of the flutter command to the PATH environment variable:
export PATH=~/Documents/flutter/bin:$PATH
For Windows systems, add the full path of the flutter command line, C:\src\flutter\bin, to the Path user variable, using a ; as the separator. Restart your computer to complete the configuration.
With this, we have completed the installation of the Flutter SDK.
When you open the Flutter root directory, you will find an examples folder containing some basic Flutter examples. In today’s article, I will use the hello_world example as an example to show you how to run a Flutter project on an emulator and a real device.
First, let me introduce the mode of running through the Flutter command line. Go to the hello_world directory and enter the command flutter emulators to view the available emulators:
Figure 1: Viewing available Flutter emulators
You can see that the two emulators we just created, Nexus 6P and iOS Simulator, are already in the list. So, let’s start the iOS Simulator and run the Flutter project:
flutter emulators --launch apple_ios_simulator
flutter run
After waiting for about 10 seconds, a familiar hello world screen will appear in front of us:
Figure 2: Flutter demo
The steps to launch and run the Android emulator are similar, so I won’t go into detail here.
However, using the command line to develop and debug Flutter is not very convenient, so a more efficient way is to configure the integrated development environments of Android and iOS.
Flutter provides a command flutter doctor to help us install the necessary dependencies for Flutter. It will check if you have the Android and iOS development environments locally and if any dependencies are missing, it will provide installation methods for the corresponding dependencies.
Next, let’s try running the flutter doctor command, and we will get the results shown in the following figure:
Figure 3: Illustration of the flutter doctor command
As you can see, flutter doctor has detected issues with the iOS toolchain and the Android Studio project configuration. In addition, since I also have IntelliJ IDEA and VS Code installed on my computer, which are IDEs officially supported by Flutter, it has also detected issues with them.
Next, we’ll solve the iOS toolchain and the Android Studio project configuration issues based on the prompts obtained from running the flutter doctor command.
Setting up the iOS toolchain #
Now, we can develop and debug Flutter applications on the iOS Simulator. But to deploy Flutter applications to a real iOS device, we need to install some additional command-line tools for connecting (similar to installing apps on a phone using iTunes on a computer) and apply for an iOS developer account for Xcode signing configuration.
According to the prompt, first, we install two dependencies: libimobiledevice and ideviceinstaller:
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
Among them, usbmuxd is a socket daemon for establishing multiple communication links with iOS devices, which abstracts USB communication to TCP communication. libimobiledevice is a cross-platform protocol library for communicating with iOS devices, and ideviceinstaller is a tool for managing apps on iOS devices using these libraries.
Now, even if you don’t understand their specific roles, just knowing that installing them allows Flutter to develop and debug on iOS real devices is enough.
Then, perform Xcode signing configuration.
Open the Runner.xcworkspace file in the hello_world project’s ios/Runner directory. In Xcode, select the Runner project on the top left of the navigation panel.
Figure 4: Flutter Xcode signing configuration
In General > Signing > Team, we need to configure the development team, which is your Apple ID login in Xcode. When the configuration is complete, Xcode will automatically create and download the development certificate.
Any Apple ID supports development and testing, but if you want to publish the app to the App Store, you must join the Apple Developer Program. For more information about the developer program, you can refer to compare memberships on the Apple official website, but I won’t go into detail here.
Finally, when we connect a real device for development for the first time, Xcode will automatically register this device in your account and then automatically create and download the provisioning profile. We just need to trust your Mac and the development certificate on the real device according to the prompts on the phone.
Now, we can develop and debug Flutter projects on iOS real devices.
Android toolchain configuration #
Compared to the configuration of the iOS toolchain, the configuration of the Android toolchain is much simpler. This is because Google has provided the Flutter and Dart plugins in Android Studio. Therefore, we can use these two plugins to manage and develop/debug Flutter projects. And since the Flutter plugin itself depends on the Dart plugin, we only need to install the Flutter plugin.
Figure 5: Flutter plugin installation
Launch Android Studio, open the menu Preferences > Plugins, search for the Flutter plugin, and click install to install it. After installation is complete, restart Android Studio and the Flutter plugin will take effect.
Since Android Studio is developed based on IntelliJ IDEA, the environment configuration is no different from IntelliJ IDEA. I won’t go into detail here.
For VS Code, click View->Command Palette, enter “install”, then select “Extensions: Install Extension”. In the search box, enter “flutter”, and select install.
Now, the configuration of the Android toolchain is complete.
Although Android Studio is Google’s official Android integrated development environment, with the support of the Flutter plugin, Android Studio also has the ability to provide a complete set of cross-platform development and testing environment for Flutter, integration packaging, etc. The underlying plugin calls the command-line tools provided by Xcode, which can simultaneously support the development, debugging, and deployment of iOS and Android applications.
Therefore, my future discussions about Flutter development and testing will be based on Android Studio as the IDE.
Running a Flutter project #
Open the hello_world project with Android Studio (Open an existing Android Studio Project), then locate the toolbar:
Figure 6: Flutter toolbar
In the Target selector, we can select a device to run the application. If no available devices are listed, you can do either of the following:
- Refer to the method I mentioned earlier, that’s opening AVD Manager and creating an Android emulator, or switching between different iOS simulators using the
open -a Simulatorcommand. - Directly plug in an Android or iOS real device.
The hello_world project is a bit special because it provides two Dart entry points: one is the English version of hello world-main.dart, and the other is the Arabic version of hello world-arabic.dart. Therefore, we can choose the entry point in the Config selector, or directly use the default main.dart.
Click the Run icon in the toolbar, wait about 10 seconds, and you will see the launched application on the simulator or real device.
For Flutter development and testing, if every code change requires recompilation and loading, it would take seconds to several minutes to see the style effect. It is undoubtedly very inefficient.
It is precisely because Flutter uses JIT compilation mode in the development stage that it is possible to further improve debugging efficiency through techniques such as hot reload. In simple terms, hot reload means that without re-compiling the code, restarting the application, or losing the program execution state, it can dynamically load the modified code and view the changes.
Note: I will analyze Flutter’s use of the Dart language and support for AOT and JIT in the “02 | Prerequisite: Dart Language Overview” article.
For the hello_world example, in order to experience hot reload, we need to make some changes to the code and modify its root node to StatelessWidget:
import 'package:flutter/widgets.dart';
class MyAPP extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const Center(child: Text('Hello World', textDirection: TextDirection.ltr));
}
}
void main() => runApp(new MyAPP());
Click the Run icon, then try modifying the code and save it. Only a few hundred milliseconds are required to see the latest display effect.
Figure 7: Hot reload
It’s cool, isn’t it! However, hot reload has its limitations, and not all code changes can be updated through hot reload.
For the hello_world example, because Flutter does not re-execute the main function after hot reload, but only recreates the widget tree based on the original root node, hot reload is only supported after we made some changes.
I will analyze the principle and limitations of Flutter’s hot reload in the article “34 | How does hot reload work?” later. For now, you only need to know that if hot reload doesn’t work, there is no need to wait for a long recompilation and loading time. Just click the hot restart button at the lower left corner of the project panel to recompile the code and restart the program at a speed of a few seconds. The only difference from hot reload is that hot restart loses the running state of the current program, but it has no impact on actual debugging.
Figure 8: Hot restart
Summary #
With today’s content, I believe you have completed the installation and configuration of the Flutter development and testing environment. You now have a certain understanding of how to check project dependencies during the installation process, as well as how to run Flutter programs on both Android and iOS devices and simulators. You also have a preliminary understanding of commonly used debugging tools in Flutter development.
By making good use of these integrated tools, we can improve the efficiency of Flutter development. The basic knowledge about the project environment provides support for learning Flutter. Therefore, if you encounter environment-related issues during development and testing in the future, you will know how to solve them.
Reflection Questions #
During the process of setting up your Flutter project environment, what problems did you encounter and how did you solve them?
Feel free to leave a comment and let me know, so we can discuss together. Thank you for listening, and you are also welcome to share this article with more friends to read together.