Introduction: I will update a series of Flutter text tutorials in the coming days

Update progress: at least two articles per week;

Update location: first in the public account, the next day update in nuggets, Sifu and other places;

More communication: You can add me on wechat at 372623326 and follow me on Weibo at CoderWhy

I hope you can help forward, click to see, give me more creative power.

Hello Flutter

In this chapter we learn how to install Flutter and write our first Flutter program.

Then we run our app on the iOS emulator and the Android emulator (I’ll explain how to run it on a real machine later).

Of course, there is a lot of code in this application that you may not understand very well, there is some dart knowledge involved, there is also some flutter stuff involved. It doesn’t matter, our goal is to get the project running, just to show that your environment is OK.

I. Environment building

It is a little difficult to build the environment, especially the installation of the Android environment. Please be patient to install it. If you have any problem, you can add my wechat account 372623326

1.1. Operating system selection

Many students will ask what operating system is used to learn Flutter?

Learning stage: Windows or macOS is ok

Development phase: macOS is usually used because we need to debug for iOS, so we usually choose macOS for convenience

Question: What if there is no macOS for future Flutter development?

  • You can rest assured that companies that develop Flutter will ship you with macOS

Flutter can be learned on Windows as well as macOS. Since I will debug for Android and iOS in my later courses, I am currently using macOS.

Once again, there is no problem with learning to use Windows. I have written a lot about Flutter on Windows before!

In the installation process, I will also say a lot of Windows installation precautions, you can follow the steps to complete.

1.2. Install the Flutter SDK

To use Flutter development, first we need to install a Flutter SDK.

Download the SDK for Flutter

Go to the Flutter website and select the latest stable version of the Flutter SDK

  • Dev /docs/develo…
  • Select your operating system and the latest Stable version (my current Stable version is 1.7.8).

Install the Flutter

1. Decompress the downloaded Flutter SDK

  • This is the same on Windows and macOS (select a directory you want to install)
  • But in macOS, I usually drag the flutter directory into the application as one of my apps (a personal habit).

2. Configure the environment variables of Flutter

  • Since we need to execute the Flutter command on the command line later, we need to configure the environment variables

For macOS or Linux, you need to edit ~/. Bash_profile

export PATH=$PATH:/Applications/flutter/bin
Copy the code

The Windows user adds the Path to the environment variable Path

  • Windows Environment Variables: Click computer icon – Properties – Advanced System Settings – Advanced – Environment Variables
  • Find Path and add the Flutter SDK directory to itBin directory

Run the flutter –version command on the terminal. If the following information is displayed, the flutter is successfully installed

Configure the mirror

The Flutter project will rely on some things that will be slow to download domestically, so we can change their installation source to a domestic one.

On macOS or Linux, the ~/.bash_profile file is still edited

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

Windows users still need to modify environment variables

  • Windows Environment Variables: Click computer icon – Properties – Advanced System Settings – Advanced – Environment Variables
  • Create a new variable PUB_HOSTED_URL with the value https://pub.flutter-io.cn
  • Create a new variable FLUTTER_STORAGE_BASE_URL with the value https://storage.flutter-io.cn

Note: this image is temporary and not guaranteed to be always available. Please refer to Using Flutter in China to get the latest information about the image server.

1.3. Configure the iOS environment

If you want to configure the iOS development environment for Flutter, you need to install Xcode on your computer.

  • Xcode is apple’s IDE for iOS and macOS, which should be familiar to anyone who has done iOS development

How do I install Xcode? There are two common ones

1. Directly search for Xcode in the App Store and find the installation

  • One disadvantage of this installation is that it must be the latest version (preferably the latest version).
  • However, the latest version of Xcode will have certain requirements on macOS, so it may have to be designed to upgrade the system
  • If you do not want to upgrade the system, you can choose the second method

2. The second way is to install the version of Xcode you want, which needs to be downloaded manually

  • Enter the developer.apple.com/download/mo… page
  • Log in to your Apple ID
  • Enter Xcode in the search box and press Enter to search for various versions of Xcode to download

Open the installed Xcode, which may be a little slow: Take your time

Choose the iOS emulator you want to use

Open Xcode and click xcode-Open Developer Tools-Simulator in the upper right corner

A default iOS emulator will open at this point, or you can choose which emulator you want to test in the Hardware-Device-System version

At this point, we can see the following emulator

At this time, we execute the following terminal command:

flutter doctor
Copy the code

You see one below

1.4. Configure the Android environment

If you want to configure the Android development environment for Flutter, you need to install Android Studio on your computer

  • Android Studio is an official Android Application Integration development environment (IDE) based on IntelliJ IDEA.

Android Studio download

  • Website address: developer.android.com/studio/?utm…
  • Download directly from the official
  • Install Double-click to install

Android environment configuration

When we open Android Studio, we will be asked whether we need to set up the proxy. This is because it is not easy to download the Android SDK in China

  • How to set up the proxy is not explained here ~~~
  • Had better set up proxy, otherwise estimate will be angry ~~~

Then the next steps will help us install the SDK and other relevant content we need to use

Once installed, click Finish.

Creating an Android emulator

Once installed, we can create the emulator: select configure-avd Manger

Select Create Virtual Device

Choose a device you want to use

Select the Android version (I didn’t select the Q version here, which is currently a Bata version) and click Download

  • Next screen, clickaccept - nextIt is ok

Next, give your simulator a name

Start the Android Emulator

At this time, we execute the following terminal command:

flutter doctor
Copy the code

See the following two devices available

1.5. Selection of development tools

Two tools are officially recommended to develop Flutter: Android Studio and VSCode. Which one should we choose?

For people with a phobia of choice, it’s not really a good choice, so I’ll give you the pros and cons of each one. The choice is yours

And I’ll give you my choice at the end

Advantages and disadvantages VSCode

VSCode is a very, very popular development tool these days, and it’s very easy to use! (I was commenting on my weibo that Microsoft stuff is getting better and better in the last two years, one of which is VSCode)

And VSCode has recently been trending to replace WebStorm as the front-end development tool of choice

VSCode benefits:

  • VSCode isn’t really an IDE, it’s just an editor.
  • So it is very lightweight, will not take up your very large memory consumption, and the start speed is very fast, for the computer configuration is not particularly high students, is certainly a very good choice.
  • And you can install a variety of plug-ins on VSCode to meet your development needs.

Disadvantages of VSCode:

  • Many of the conveniences Android Studio includes are missing, such as click launch, hot update click, etc.
  • And in some cases there are problems;
  • For example, in the process of using it before, sometimes the hot update is not timely and often cannot see the effect, so I have to restart;
  • For example, in some cases, it is not sensitive enough without code prompts;

Instructions for Use:

To develop Flutter using VSCode we need to install two plug-ins: Flutter and Dart

Pros and cons of Android Studio

For those who have done Android development or have used Webstorm, IDEA, PHPStorm, etc., there will be no problems with Android Studio

Android Studio benefits:

  • It goes without saying that integrated development environments (ides) have almost everything you need
  • And the problems with VSCode mentioned above are largely absent from Android Studio

Disadvantages of Android Studio:

  • In a word: heavy
  • Both the IDE itself and starting a project with Android Studio are relatively slow
  • Occupy a lot of computer resources, so the low configuration of the computer will be stuck

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 to learn Flutter, I have been struggling for a long time.

  • In my previous use of Flutter (prior to writing this tutorial), I used VSCode.
  • But for starters, Android Studio is much friendlier when learning Flutter.
  • If there is a video tutorial later, I can set up a poll for people to decide which development tools to use.

However, whatever tool you use is only an aid, and what matters is the content of the course.

So how do I choose a development tool?

  • In learning the Dart language, I chose VSCode because it directly creates a Dart file for us to study
  • In learning about Flutter, I chose Android Studio because the various integrations are easier to use (you can continue to use VSCode without any problems).

2. Hello Flutter

Next we created our first Flutter application and ran it on two simulators

2.1. Create the Flutter application

There are two ways to create a Flutter application: through a terminal and through an editor.

Here I first select Through terminal (Windows and macOS are the same command)

Open terminal – Run the following command:

flutter create helloflutter
#Note: The following name cannot be capitalized or used as a special symbol
Copy the code

2.2. The project runs in the simulator

Open it from one of your favorite development tools (I’ll choose Android Studio for now)

Select the device you want to boot and click the Run button:

I ran the project on two simulators

2.3. Experience a Flutter thermal overload

For our development test phase, if every time we change the code, we need to recompile and load the whole project, 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 all front-end development supports Hot Reload, which can greatly speed up our development efficiency.

  • Hot overloading allows you to see the effects of the modified interface without having to recompile the code and restart the application

Flutter uses JIT compilation mode during development (I will explain what JIT mode is later), so can it be hot reloaded to improve our development efficiency

So let’s think about thermal overloading, and we’ll have time to talk about how thermal overloading works, right

Change the contents of the red box below to Hello Flutter and save the application

  • You’ll notice that in less than a second, the interface will refresh directly
  • And there’s no application there’s no redo, it’s very efficient

If Hot reloading doesn’t work, we can also click Hot Restart in the upper right corner without having to rerun the project

2.4. Project catalog analysis

After the Flutter project is created, it will feel complicated. Let’s take a look at the following figure:

What does a catalog contain?

  • This contains the lib and test directories required for Flutter development and testing. We mainly used the Lib directory during Flutter development
  • Others manage configuration file information for your project, as well as Git related files
  • In addition, there is an Android sub-project and an iOS sub-project

Why include Android and iOS subprojects?

  • This is because as a cross-platform development scheme, it will eventually be embedded into the Android project or iOS project to run
  • And in the development process also need to call some native functions

Note: All the content of Flutter will be published on our official website. We will also update other technical articles about Flutter, including TypeScript, React, Node, data structures and algorithms, etc. We will also update some of our own learning experiences