Environment construction of flutter (2)

Time:2020-3-22

In the next period, I will update some column flutter text tutorials

Update progress:At least two articles per week;

Update location:The first time is in the official account, and the second day is updated in nuggets and places of thought.

More communication:You can add my wechat 372623326 and follow my micro blog: Code why

I hope you canHelp forward, click to seeGive me more creative power.

Hello Flutter

In this chapter, we learn how to install flutter and write the first flutter program.

Then we will run our application on the IOS simulator and Android simulator respectively (I will explain how to run on the real machine later).

Of course, you may not particularly understand a lot of code in this program, which involves some dart knowledge, but also involves some fluent things. It doesn’t matter. Our goal is to run the project, which means your environment is OK.

1、 Environment construction

It’s a bit troublesome to build the environment, especially the Android environment. Please install patiently. If you have any questions, you can add my wechat 372623326

1.1. Operating system selection

A lot of students will ask how to learn flutterWhat operating system to useWhat about it?

Learning stage:Windows or Mac OS is OK

Development stage:Generally, we need to use Mac OS, because we need to debug for IOS, so we usually choose Mac OS for convenience

Doubt:What if there is no Mac OS for future development of flutter?

  • You can rest assured that the company using flutter will surely equip you with Mac OS

Flutter can be studied on windows or Mac OS. Because I need to debug Android and IOS in my later courses, my current environment is Mac OS.

Here I emphasize again that there is no problem in using windows in the learning stage. I have written a lot of flutter on windows before!

During the installation process, I will also talk about a lot of precautions for windows installation. Please follow the steps step by step.

1.2. Install the flutter SDK

First of all, we need to install a flutter SDK.

Download the SDK of flutter

Go to the website of flutter and choose the latest and stable version of flutter SDK

  • Website address: https://shuttle.dev/docs/deve
  • Choose your own operating system and the latest stable version (my current stable version is 1.7.8)

Installing the flutter

1. decompress and download the good Flutter SDK

  • This is the same in windows and Mac OS (choose a directory you want to install)
  • But in Mac OS, I usually say that the flitter directory is dragged into the application as one of my applications (personal habits only)

Environment construction of flutter (2)

2. Configure environment variables of flutter

  • Because we need to execute the command of flutter at the command line later, we need to configure the environment variable

For Mac OS or Linux system, you need to edit ~ /. Bash_profilefile

export PATH=$PATH:/Applications/flutter/bin

Windows user adds the path under path of environment variable

  • Windows environment variable modification: click computer icon – properties – advanced system settings – Advanced – environment variable
  • Find path, and add the directory of flutter SDKBin directory

Execute flitter — version in the terminal, as shown below, indicating that the installation of flitter is successful

Environment construction of flutter (2)

Configuration mirroring

The flitter project will rely on some things, which will be slow to download in China, so we can change their installation sources to domestic ones (that is, setting domestic images)

MacOS or Linux, still edit the ~/.bash profile file

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter

Windows users still need to modify environment variables

  • Windows environment variable modification: click computer icon – properties – advanced system settings – Advanced – environment variable
  • Create a new variable “pub” hosted “URL, whose value is https://pub.fluent-io.cn
  • Create a new variable, shuttle storage base URL, whose value is https://storage.shuttle-io.cn

Be careful:This image is a temporary image and cannot be used all the time. For details, please refer to using shutter in China for the latest information about the image server.

1.3. Configure IOS environment

If you want to configure the IOS development environment for flutter, you need to install an Xcode on our computer (this part of windows computers is ignored)

  • Xcode is Apple’s IDE for IOS and Mac OS. Children’s shoes that have developed IOS should be very familiar with it

How do I install Xcode?Two are common

1. Search Xcode directly on the app store and find the installation

  • There is a disadvantage in this way of installation. The latest version must be installed (of course, the latest version is the best)
  • However, the latest version of Xcode will have certain requirements for Mac OS system, so it may need to be designed for system upgrade
  • If you do not want to upgrade the system, you can choose the second way

2. The second way is to install the version of Xcode you want. You need to download it manually

  • Go to https://developer.apple.com/download/more page
  • Log in to your own Apple ID
  • Enter Xcode in the search box, press enter to search and find various versions of Xcode to download

Open the installed Xcode, which may be a little slow: don’t worry, take it slow

Choose the IOS simulator you want to use

Open Xcode, click Xcode – Open developer tools – simulator in the upper right corner

Environment construction of flutter (2)

At this time, a default IOS emulator will be opened. You can also select the emulator you want to test in hardware – device – system version

Environment construction of flutter (2)

At this time, we can see the following simulator

<imghttps://tva1.sinaimg.cn/large/006y8mN6gy1g6hkj5fcsuj30ls16uhdt.jpg&quot” rel=”nofollow noreferrer”>https://tva1.sinaimg.cn/large…; style=”zoom:50%” />

At this time, we execute the following terminal commands:

flutter doctor

Here’s one

Environment construction of flutter (2)

1.4. Configure Android environment

If you want to configure the Android development environment for flutter, you need to install an Android studio on our computer

  • Android studio is based on IntelliJ idea, Google’s official Android application integrated development environment (IDE).

Download of Android studio

  • Official website address: https://developer.android.com
  • Download it directly
  • Double click to install

Environment configuration of Android

Open Android studio and ask us if we want to set up a proxy. This is because it is not easy to download Android SDK in China

  • As for how to set up an agent, I will not explain it here~~~
  • You’d better set up an agent, or you’ll be pissed off~~~

Environment construction of flutter (2)

After that, the next steps will help us install the SDK and other related contents

Environment construction of flutter (2)

After installation, click finish.

Create Android emulator

After installation, we can create the simulator: select Configure – AVD manger

Environment construction of flutter (2)

Select Create Virtual device

Environment construction of flutter (2)

Choose a device you want to use

Environment construction of flutter (2)

Select Android Version (I didn’t choose Q version here, it is still a Bata version at present), click download

  • Next screen, clickaccept - nextThat’s all right.

Environment construction of flutter (2)

Next, name your simulator

Environment construction of flutter (2)

Launch Android emulator

Environment construction of flutter (2)

At this time, we execute the following terminal commands:

flutter doctor

You can see that there are two devices available

Environment construction of flutter (2)

1.5. Selection of development tools

Two tools are officially recommended to develop flutter: Android studio and vscode. Which one do we choose?

For people with selective phobia, it’s really not a good choice, so I’ll tell you their advantages and disadvantages. You have the right to choose

Finally, I will give my choice

Advantages and disadvantages of vscode

Vscode is a very popular development tool recently, and it is very easy to use! (I used to feel on Weibo that Microsoft’s things have become more and more useful in the past two years, one of which is vscode)

And vscode has recently become the preferred development tool for the front-end instead of webstorm

Advantages of vscode:

  • Vscode is not really an IDE, it’s just an editor.
  • So it’s very lightweight, it won’t take up a lot of memory consumption, and the startup speed is very fast. It’s certainly a very good choice for students who are not particularly high in computer configuration.
  • And you can install various plug-ins on vscode to meet your development needs.

Disadvantages of vscode:

  • A lot of Android studio does not include convenient operations, such as click start, hot update click, etc;
  • In some cases, there will be some problems;
  • For example, in the process of using before, sometimes the hot update is not timely and often does not see the effect, so it must be restarted;
  • For example, in some cases, no code prompt is not sensitive enough;

Instructions for use:

Using vscode to develop flutter, we need to install two plug-ins: flutter and dart

Advantages and disadvantages of Android studio

For students who have developed Android or used webstorm, idea, phpstorm, etc., there must be no problem in using Android studio

Advantages of Android Studio:

  • Integrated development environment (IDE) needless to say, the functions you need are basically
  • And the problems of vscode mentioned above will not appear in Android studio

Disadvantages of Android Studio:

  • One word: heavy
  • Whether it’s the IDE itself or using Android studio to launch a project, it will be relatively slow
  • It occupies a lot of computer resources, so the computer configuration is low, so there will be a jam

Instructions for use:

To develop flutter with Android studio, we need to install two plug-ins: flutter and dart

My choice

In fact, how to choose between the two is better for children’s shoes to learn about flutter. I have been struggling for a long time.

  • In the process of using fluent (before writing this tutorial), I used vscode.
  • But for beginners, Android studio will be more friendly in the process of learning flutter.
  • If a video tutorial comes out later, I can set up a voting tool for you to decide to use.

However, no matter which tool is used, it is only auxiliary. What is important is the content of our course.

So, how do I choosedevelopment toolWhat about it?

  • In the process of learning dart language, I choose vscode because it can directly create a dart file for us to learn
  • In the process of learning flutter, I chose Android studio because various integrations are more convenient to use (there is no problem for you to continue to use vscode)

2、 Hello shuttle

Next we create our first flutter application and run it on two simulators

2.1. Create the flutter application

There are two ways to create a flutter application: through the terminal, through the editor.

Here I choose to use the terminal first (windows and Mac OS are the same commands)

Open terminal – execute the following command:

flutter create helloflutter
#Note: the following names cannot be special symbols or capitalized

Environment construction of flutter (2)

2.2. Project running in simulator

Open it with a development tool you like (I choose Android studio for now)

Environment construction of flutter (2)

Select the device you want to start and click the run button:

Environment construction of flutter (2)

I ran the project on two simulators

Environment construction of flutter (2)

2.3. Experience the hot and heavy load of flutter

For our development and test phase, if we need to recompile the whole project and reload every time we modify the code, it may take about 10 seconds or even a few minutes each time (if the computer is too slow), so the development efficiency is very low.

Now the front-end development supports hot reload, which can greatly speed up our development efficiency.

  • Hot overloading can see the effect of the modified interface without recompiling the code and restarting the application

In the development phase, flutter uses JIT compilation mode (I will explain what JIT mode is later), so it can achieve hot overload to improve our development efficiency

Now let’s experience the hot overload. Later, we will analyze how the hot overload is implemented

Change the content in the red box below to Hello shuttle, and save the application

  • You will find that in less than one second, the interface is refreshed directly
  • And there is no application without any re-engineering, which is very efficient

Environment construction of flutter (2)

If the hot reload doesn’t work, we can also click the hot restart in the upper right corner without rerunning the project

Environment construction of flutter (2)

2.4. Project catalog analysis

After the creation of the shuttle project, it will feel more complicated. Let’s see the following figure:

Environment construction of flutter (2)

What does the catalog contain?

  • It contains the lib and test required by the development and test of the fluent. During the development process, we mainly use the Lib directory
  • Others are configuration file information of management project, including git related files
  • In addition, it includes an Android sub project and an IOS sub project

Why include Android subproject and IOS subproject?

  • This is because as a cross platform development solution, it will be embedded in the Android project or iOS project to run
  • In addition, some native functions need to be called in the development process

Note: all contents start with the official account. After that, Flutter will update other technical articles. TypeScript, React, Node, data structure and algorithm will also update some of their learning experience. Welcome everyone’s attention.

Environment construction of flutter (2)