preface

Recently, Flutter has been flooded with technology blogs and websites, and seems to dominate the world. So I recently decided to try something new and explore the world of Flutter step by step from scratch. Start by building your environment and record your own exploration of Flutter.

Install the Flutter

First we can see some steps to configure the environment on the Flutter website. It’s straight to dry here. Let’s go.

1. Configure HomeBrew

Before configuring the Environment for Flutter, we need to check that HomeBrew is up to date.

$ brew update
Copy the code

If you don’t have brew, you can download it from the HomeBrew website. I will not repeat it here. If you download it again, you can see the printed information below.

Download the SDK

The next step is to download the SDK from the official website. Note that there are two ways to download the SDK, a direct git clone – b beta https://github.com/flutter/flutter.git download, 2 it is himself in the download website, the following figure

Here I tried both methods, the first method was too slow, after spending an hour and a half downloading to 94% and finally failing the process, I decided to use the second method, the whole process only took 3 minutes, quite satisfied. After downloading, a package named Flutter_macOS_v1.5.4 – hotfix.2-stables. Then we decompress the zip package and place the folder into the root directory.

3. Configure environment variables

This is because the Flutter SDK includes many command-line tools. We need to configure the environment variables, so I just installed it in the root directory.

Configure the mirror

When the Flutter is running, we need to download some necessary resources from the official website. However, due to the heavenly wall, we need an image server. It is clearly written on the official website, and this is a temporary image.

We jump to the root directory

cd ~
Copy the code

We’ll find this.bash_profile hidden file, which we’ll open with vim

vim ~/.bash_profile
Copy the code

Then press the A key to enter edit mode and configure the following three environment variables

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/xueliheng/flutter/bin:$PATH
Copy the code

Notice that the third environment variable here /Users/xueliheng/ is my root directory, and then /flutter/ is the folder that we just unpacked into the ZIP package. The above two environment variables are two mirror addresses, as mentioned above. Shift + : then type wq to save and exit vim. Enter the following command:

source ~/.bash_profile
Copy the code

Finally, we can verify that the FLUTTER environment has been configured successfully. Input:

flutter -h
Copy the code

If the following information is displayed, the configuration is successful

4. Configure Android Studio

If you haven’t downloaded Android Studio, go to the official website to download it. We use the flutter doctor command to check the flutter environment configuration. We can see the following print

Everyone who goes onto university here is something we can go after. But he did tell you what to do. Like the first hint:

[University] Android Toolchain-developforAndroid Devices Qualify Unable to locate Android SDK.Copy the code

This is where you go to download Android Studio. After downloading, we opened AS and asked him to download something that should be downloaded. If there’s a hint here

[University] Android Toolchain-developforThose who qualify can enter onto those who qualify. Android Devices (Android SDK Version 24.0.2) Qualify Flutter requires Android SDK 28 and the Android BuildTools 28.0.3Copy the code

This is a prompt for you to upgrade the SDK, and the command is as follows

"/Users/xueliheng/Library/Android/sdk/tools/bin/sdkmanager" "platforms; android-28" "build-tools; 28.0.3"
Copy the code

Note that the upgrade of this place is required to “scientific Internet access”, if some partners do not have this condition, I here baidu cloud above you prepared a link, extraction code: E48C, you can download down. Download it and unzip it to /Users/Library/Android/. Just overwrite the original SDK directly, and it is already the latest SDK.

Next let’s configure the Environment variables for Android, again in the.bash_profile file in the root directory, and add four environment variables to it

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/emulator
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
Copy the code

Respectively is:

• Path to android SDK
• Android emulator path
• Android Tools path
• Android platform tools

The following information is displayed when the Flutter Doctor is checked

Android Studio

Those who qualify Flutter plugin not installed; Those who qualify Dart plugin not installed; This adds Flutter specific functionality. this adds Dart specific functionality.Copy the code

This means that there is no Flutter plugin, so let’s configure the Flutter plugin in AS. Open the Preferences for AS, click on Plugins, type flutter in the search bar, find the appropriate plugin, and Install. When prompted to install the Dart plug-in, click Yes to install it. After the installation is complete, restart IDE restarts the AS. When you reboot, you’ll see an extra one of these

Let’s check with the Flutter Doctor again

Now it’s finally ok. We can see that the Android environment is successfully configured, now we need to configure the emulator.

5. Android simulator configuration

In AS, locate the emulator configuration AS shown below and select

Then create the device and select the device

Select the system

Click Download and you’re done.

6. Configure the iOS environment

After we have configured the Android environment, check the Flutter Doctor again.

Here’s the thing. The current version 1.5.4 of Flutter needs to match the new version Xcode10.2.1. Try following his prompt, which tells me that the version of Xcode is too low and I need to upgrade Xcode

After the update to the latest, continue with the following steps will still report an error. Then we can try the following method:

$ brew link pkg-config
$ brew install --HEAD usbmuxd
$ brew unlink usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller
Copy the code

After these are performed perform the flutter doctor

7. Use of VSCode

VSCode is used above, it is much simpler, here I simply answer the tautness. Just download both the Dart and Flutter plug-ins

Then command+ Shift +p enter flutter and select FLUTTER: New Project

Enter the name of the project you want to create and the address where the project will be stored. If prompted to specify the path to the SDK of the flutter, select the decompressed folder in the root folder of the flutter. Next up is this interface

Next we select View->Start Debugging to run the project.

Of course, this process requires you to open the Xcode emulator. After running the Flutter, you will see this screen, which is your first Flutter project!

8. Use of Hot Reload

We open the lib/main.dart file and find it there

You have pushed the button this many times:
Copy the code

And change this to

You have clicked the button this many times:
Copy the code

Then we can see a little lightning bolt on the interface

Now if Command + S saves the changes, we can quickly see the changes in the emulator without having to re-compile. This is awesome! Solved a big pain point for iOS developers!!

conclusion

At this point, the construction of the environment for Flutter is almost complete. The whole process takes about 2 hours, including digging pits, researching materials, downloading files, and surfing the Internet scientifically… And so on and so on. Of course, Internet speed is basically the biggest obstacle, wasting a lot of time. So it takes a certain amount of patience. The following articles will also continue to update, recently a little slack, OpenGL series of articles a little more slow pace, this will be made up later. I have just taken charge of Flutter, and I am also slowly picking pits. I will also record my learning experience with Flutter, and I hope to communicate with you more. Again, I attach my email [email protected]. Welcome to discuss and exchange.