Copyright notice: This article is the blogger’s original article, shall not be reproduced without the permission of the blogger. Juejin. Cn/post / 684490…

This article will be published on our official accountBecause those thingsWelcome your attention.

Reprint please indicate the source: juejin.cn/post/684490… This post is from AWeiLoveAndroid’s blog

On Google I/O ’17, Google introduced us to Flutter, a new open source library for creating mobile applications.

What is a Flutter? Dart is a mobile application development framework developed by Google using the Dart language to help developers develop high performance, high quality native applications on iOS and Android. Flutter is a cross-platform, free, open source UI framework that allows iOS and Android to share a single set of code.

In February 2018, Flutter launched its first Beta version. That’s a good thing. Look forward to the official release soon. I recently looked into Flutter. The tool went through a lot of trouble getting it up and running, but it worked. Here is a look at the official Demo running in the Android emulator:

This article is posted on Github. For more information about Flutter, click hereGithub.com/AweiLoveAnd…

The following details about my installation and encountered some problems:

Society I weigao, good people do more. Get started!

I. Installation of Flutter:

To install and run Flutter, your development environment must meet these minimum requirements: here’s an example of Flutter on Windows. Read the documentation for the macOS installation: flutter. IO /setup-macos… The Linux installation documentation can be found at flutter. IO /setup-linux…

(a) System requirements: Windows 7 SP1 or later (64-bit), disk space: 400 MB (excluding IDE/tools disk space). CPU please use Intel, CMD can not develop Android (card to explode!!) ! Memory 8G above on the line, other hardware does not require.

Specific description: omitted

Download JDK 1.8 (must be version 1.8)

1. The first open the Java website www.oracle.com/technetwork… Find the corresponding version to download, as shown in the picture, my computer is Win7 64-bit, I will choose the last download.

2. Double-click Installation, click Next, select the installation path, and configure environment variables.

Step to open environment variables: Desktop “My computer” (or “computer”) -> right-click “Properties” -> select “Advanced System Settings” -> select “Environment variables” below.

  • A. In the pop-up”The environment variable“Window, click on the bottom”new“Button, in the popup”Creating a System Variable“Window, create a new one namedJAVA_HOMEThe value of the variable is the installation path of Java. Mine is:D:\develop\my_java\.
  • B. Edit the Path environment variable and add the value to the end of the original variable; %JAVA_HOME%\bin; %JAVA_HOME%\jre\binNotice the semicolon in front.
  • C. Create a file namedCLASSPATH“, the value of the variable is:.; %JAVA_HOME%\lib; %JAVA_HOME%\lib\dt.jar; %JAVA_HOME%\lib\tools.jarNote: Don’t forget the previous dot.

As shown in the figure:

  • D. Open the CLI and enterjava -versionIf the version number is displayed, the environment is configured properly. Otherwise, perform the preceding steps again. The specific output is shown in the figure below:

(3) Android Studio, SDK, JDK and emulator configuration (emulator does not need to be installed if it is running on a real machine)

Tips:
tool Specifies the version requirements of the tool
Android Studio 3.0 or higher
SDK Android 4.1 (API 16) or later
Android Emulator Image X86 or x86_64 images are recommended

  • (1) Android Studio download

    Android Studio download address see: developer. The Android, Google. Cn/Studio / # dow… Installation: Specify the installation path and click Next all the time. Then unzip to an English directory. I chose the install-free version here. The following introduction is based on the installation – free version. The installation steps are similar.

  • (2) Android Studio installation

1. Double-click the Android Studio icon on the desktop (or go to the /bin directory after decompression and double-click studio.exe). A window for importing the configuration is displayed, as shown in the figure.

2. Since it is the first time to open Android Studio, we generally Do not need to import the configuration, directly click Do not import Settings, click OK to enter the next step, then the logo loading page will be displayed. As shown in the figure.

3. Then there’s a popup asking you to send feedback to Google. We hit “Don’t send” and Don’t send.

4. A pop-up window will appear as shown in the figure. Since it is the first time to allow Android Studio to find the SDK, it will prompt you to set up the proxy, I choose to cancel here.

Then we open the Android Studio installation path /bin directory, Find idea. The properties, open the file, at the end of the lines with a disable. Android. First, the run = true, then open the android studio later won’t appear the tip. As shown in the figure:

5. Next, I click Next to go to the next step, as shown in the picture.

6. Then I will be prompted to install the version, the first is the standard installation, the second is the Custom installation, we choose the default second Custom installation, directly click next to enter the next can be. As shown in the figure:

7. Then set the style. There are white and black options, I choose the black on the right, as shown in the picture.

8. Next, set the installation options, as shown in the figure. Android SDK and Android SDK Platform will be installed by default. Since my computer uses the Intel CPU, I have checked the third option Intel HAXM, which is mainly used for acceleration when starting the emulator. By the way, I have also checked the fourth emulator option. If necessary, you can install the App in the simulator for subsequent operations. At the bottom is the SDK installation path. The default installation directory is drive C, so you need to choose a non-drive C installation directory, such as the D:\develop\ SDK path. Click next to proceed to the next step.

9. Here is to set the default size of Intel HAXM, I choose the default 2G, as shown in the figure. Click Next to go to the next step.

10. Now start to install the SDK. After a while, the installation is complete, as shown in the figure below.

11. After the installation is complete, click Finish to indicate the installation is complete. As shown in the figure.

  • (4) SDK and Android Simulator:

1. Double-click to open Android Studio and enter the welcome page, as shown in the picture:

2. Then open the inverted triangle button to the right of Configure in the lower right corner and select Settings, as shown in the picture:

3. Then go to Appearance and Behavior –> System Settings –> Android SDK Enter the page of the Android SDK, we can see the SDK Platforms, this is a time when installed in front of the default installation of the file, is the core of the SDK files. Google APIs Intel x86 Atom System Image emulator. This emulator contains Google apps and services including Google Play Service. In general, we use the Intel x86 Atom System Image emulator (32-bit) or the Intel x86 Atom_64 System Image emulator (64-bit). In real development, you can download emulators for different apis as needed to accommodate different versions. As shown in the figure.

You are advised to download different versions of the Android SDK Platform and corresponding SDK Tools versions. The detailed description of each file is shown in the following screenshot:

4. You need to add two values to the Path environment variable. These are the paths of the Tools directory and platform-tools in the Android SDK. (If it is already configured, you do not need to configure it.)

D:\develop\sdk\tools;
D:\develop\sdk\platform-tools;
Copy the code

(iv) Tools: The following two tools are required for Flutter:

(1) PowerShell 5.0 or later

PowerShell is Microsoft’s more convenient command line tool to replace CMD, regardless of Windows 7, 8, or 10 Windows system has this command line tool.

To check whether PowerShell is installed, you can click on the lower left corner of the computer -> Control Panel -> Programs -> Programs and Features, and find PowerShell. Sometimes you may not find PowerShell (my computer can not find it), then win + R, type PowerShell press Enter, Enter $PSVersionTable to view the PowerShell version. Here is my PowerShell version number information.

If an error message is displayed indicating PowerShell is not installed, install PowerShell as follows:

  • 1. Make sure you have.net 4.5 or above installed. Microsoft.net Framework 4.61 www.microsoft.com/zh-cn/downl…

  • 2.Microsoft.net Framework 4.61 Simplified Chinese language package www.microsoft.com/zh-cn/downl…

  • 3. Download the PS5.0 installation package at www.microsoft.com/en-us/downl…

  • 4. Once installed, use PowerShell as an environment variable. If the environment variable has one, don’t worry about it. (Open powershell, enter $PSVersionTable, if version information is displayed, OK, if error please set environment variable.)

If or your version number is lower than 5.0, click computerThe lower left corner –> The control panel –> The program –> Programs and FunctionsGo to PowerShell and uninstall it. Then follow the above installation steps to install PowerShell.

[Note:] The command line cannot display some characters or Chinese garbled characters:

  • 1, unable to display √ or × characters due to dot matrix fonts. Just set the console font. Right-click on the console title, select font, and change the dot matrix font to another font.

  • 2, CMD Chinese garble solution:

Win +R enter regedit to enter the registry. 2. Find 'HKEY_CURRENT_USER\Console\%SystemRoot%_system32_cmd.exe'. Change the value to 65001 in decimal. If it does not exist, create a new DWORD (32-bit value) under this item, name it "CodePage" and set the value to "65001" 3. Restart the CMD to take effectCopy the code
  • 3, PowerShell Chinese garble solution:
Win +R Enter regedit to enter the registry. 2. Find 'HKEY_CURRENT_USER\Console\%SystemRoot% _SYSTEM32_Windowspowershell_v1.0_powershell.exe' The item. If a CodePage entry already exists, change the value to decimal "65001"; If it does not exist, create a new DWORD (32-bit value) under this item, name it "CodePage" and set the value to "65001" 3. After installing PowerShell, run the PowerShell to check the version number. My PowerShell version number is as follows: PSVersion 5.1.15063.1029 PSEedition Desktop PSCompatibleVersions {1.0, 2.0, 3.0, 4.0... } BuildVersion 10.0.15063.1029 CLRVersion 4.0.30319.42000 WSManStackVersion PSRemotingProtocolVersion 2.3 3.0 SerializationVersion 1.1.0.1Copy the code
(2) Git for Windows

Using the git command line (check out my blog git and GitHub quick Start for full details on how to use Git) :

git clone -b beta https://github.com/flutter/flutter.git
Copy the code

Screenshots of the runtime (here is the beta version, you can also download other branches, such as the Master branch) :

2. Configure environment variables

(1) ConfigurationflutterThe environment variable

If you want to use the flutter command on the command line, you need to add the path of the flutter to the path. Find the PATH to the flutter installation, for example, E:\develop\flutter\bin. I copy the PATH to the flutter installation, right-click on my computer, and choose Properties > Advanced System Properties > Environment Variables > Find PATH. Click Edit -> paste the path you just copied in at the end, and save all the way to ok.

Next,, use flutter –version to check the version number and see if the environment variable has been configured. OK if it looks like the figure below.

Note: If only inputflutterOr inputflutter -versionThis should be noticed when flutter thinks that it has automatically updated the latest version.

(two) configure the domestic mirror (for the future stability, this step must be done, so as not to always over the wall)

If you use Flutter in your country, you may need to find a trusted mirror site that is synchronized with the official site to help your Flutter command line tool download the resources it needs. You need to set two environment variables for this: PUB_HOSTED_URL and FLUTTER_STORAGE_BASE_URL, and then run the Flutter command line tool.

Shanghai jiaotong university FLUTTER_STORAGE_BASE_URL Linux users group: https://mirrors.sjtug.sjtu.edu.cn PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn FLUTTER_STORAGE_BASE_URL Flutter community: https://storage.flutter-io.cn PUB_HOSTED_URL: https://pub.flutter-io.cnCopy the code

It is recommended to use the image of the Flutter community, which is faster

Open the flutter command line

Win + R shortcut key, enter CMD, Enter, enter flutter doctor, enter.

This command may be slow to run at first, and Flutter will automatically install the required dependencies and compile them. Suggest scientific Internet.

Dart SDK downloaded with the flutter doctor command will be placed in the flutter installation path /bin/cache/dart-sdk (for example, my path is E:\develop\flutter).

Dart SDK downloaded by using the Flutter doctor command is an emasculated version of DART. Many APIS have been changed, and the dart version number corresponds to the one by one. Direct download of the DART SDK is up to date and does not apply to Flutter. Remember!!!!! Don’t download the DART SDK directly to the /bin/cache/dart-sdk directory of the flutter installation path to make the flutter unavailable!!

Installation process screenshot:

Note: [√] this is OK to install, [X] is required to install, or is installed but not running. (Specifically, how to install those items marked [X] will be explained in detail later in this article, which is briefly mentioned here.)

There are four things in it:

  • This is the Flutter tool, the one you just downloaded from Git.
  • (2) The Android toolchain, here referring to the SDK, will mark the maximum version number of the SDK.
  • (3) The corresponding version of IDE tools, such as my Android Studio 2.2 version (this is the download version), Android Studio 3.2 version (this is the install free version, so it will also be displayed), and Intellij IDEA
  • (4) The connected device can be a simulator or a real machine. If it is connected, it will be displayed.

Several common commands for flutter

The screenshot of the command for viewing the version number is as follows:

The following are common commands:

Common commands meaning
–version View the Flutter version
-hOr — help * * * * Prints all command line usage information
analyze Analyze the project’s Dart code.
build Flutter build command.
channel List or switch Flutter channels.
clean Delete the build/directory.
config Configure the Flutter Settings.
create Create a new Flutter project.
devices List all connected devices.
doctor Displays information about installation tools.
drive Run the Flutter driver tests for the current project.
format Format one or more Dart files.
fuchsia_reload Thermal reloading on Fuchsia.
help Displays help messages for Flutter.
install Install the Flutter application on the attached device.
logs Displays the log output for running the Flutter application.
packages The Flutter command is used to manage Flutter packages.
precache Fills the cache of binary artifacts for the Flutter tool.
run Run your Flutter application on the attached device.
screenshot Screenshot taken from a connected device.
stop Stop Flutter application on attached devices.
test Unit tests of Flutter for the current project.
trace Start and stop tracking the Flutter application running.
upgrade Upgrade your Flutter copy.

Installation of development tools

(a) the AS

Flutter requires Android Studio to install version 3.0 or higher.

AS installation, this needless to say, everyone installed it, JDK, SDK and so on have been configured. Let’s just read the following.

(2) Install the Flutter and Dart plug-ins

Flutter requires the Flutter and Dart plugin to be used:

Download File –> Settings –> Plugins –> Browse repositories, and then download the File –> Settings –> Plugins –> Browse Repositories.

  • FlutterPlug-in installation:

  • DartPlug-in installation:

Once installed, restart the AS to use the plug-in.

To update a Flutter, see the following steps (skip this step if no Flutter is updated) :

To update both the Flutter SDK and the package, use the following command:

flutter upgrade
Copy the code

If Fluttter has been installed and you need to switch the Flutter branch, for example, if YOU want to download the PreView version of Flutter.

The package we downloaded below the Beta branch has recently been released with the PreView version of Flutter, so how should we update it?

Let’s start with a few commands:

View remote branches:

git branch -a 
Copy the code

View local branches:

git branch -v
Copy the code

Switch branches:

Git checkout -b git checkout -b masterCopy the code

How do Git clone remote github branches?

git clone-b Branch name Url on GithubCopy the code

For example, to download the master branch of Flutter (the PreView version is the same branch), run the following command:

git clone -b master https://github.com/flutter/flutter.git
Copy the code

8. Run a Demo app

SDK environment that Flutter supports: Android 4.1 (API 16) or later. Android emulators: x86 or x86_64 images are recommended.

The process of creating a project is very similar to a normal Android project.

Open AS, go to File –> New Flutter Project and select Flutter Application

Then click Next and enter a project name.

** Note: the ** project name must be lowercase, and words must be separated by underscores.

(2) Enter the package name, click Next, click Finish, and wait for compilation. If it is not configured properly, an error is usually reported at this time.

** Note: ** Ios and Kotlin are supported here, check if necessary.

Dart: Select Main. dart and click on the green triangle icon to Run (or Run).

The menu bar is a little different from the previous version. In the previous version of AS, you can find the Build option in the Build menu.

If the code changes, you can click the yellow lightning bolt icon or press Ctrl + S after editing the code to enable hot reloading.

Screenshot after run:

Project directory structure:

9. Hide the end of the sentence:

If you look at the code, you’ll notice that there is a comment at the end of each sentence indicating which component is currently in the scope. If you don’t like it, you can disable it: Go to File -> Settings, click Editor, select Appearance, and remove the last √ to hide the end-of-sentence comment. As shown below:

X. Some problems encountered:

[Note:] See the blog for more detailsSummary of Flutter pit filling, this is the most comprehensive summary.

(1) Uninstall the environment associated with flutter

    1. Dart’s plug-in installation package is in the \AppData\ roam \ pub\ \Cache\ Hoste\ pub.dartlang.org folder on drive C, so just go to the Pub folder and delete it.
    1. The flutter source file is the project source you downloaded from Github. For example, I put E:\develop\flutter. All I need to do is delete the flutter folder.
    1. There’s one under the user name on drive C. AndroidStudioXXX folder, this is AS a cache directory, such AS mine is C: \ Users \ luzhaowei AndroidStudio2.2 open, Find the plugin directory C: \ Users \ luzhaowei AndroidStudio2.2 \ config \ plugins to Dart and flutter with intelliJ two folders delete
    1. Delete the Settings related to flutter and DART from the environment variables.

The following error will occur when the flutter doctor is run on the command line after the flutter has been uninstalled:

Note: due to the download of foreign websites on the information, need to science online!!

I exit the command line and run it again, and it still fails.

The BITS transfer service is not enabled, so I do the following to open BITS:

Computer -> Right click "Manage" -> Services and Applications, click "Services", and see the image below:Copy the code

Then select the one marked in the image, right click on “Properties” and change it to Automatic, OK. As shown below:

Then I delete the folders I just downloaded and run git again to download flutter. Then execute the flutter doctor command. This time the flutter doctor is better, but the command line updates slowly and stays on the command line as shown in the figure below:

After a long wait, I finally got out.

Then there was another long wait. There was an error in downloading Material Fonts, so I closed the command line, opened the command line again and executed the flutter doctor command.

And then failure again. No, just close the command line.

Then re-open the command line and execute the flutter doctor command. After several hours, the environment is finally installed! See the check mark below to indicate that the flutter has been updated.

Then re-open the command line and execute the flutter doctor -v command. See what else you need to install? (The latest version of Flutter I have installed is 0.4.4), as shown below:

There is a difference between the new version and the old version, here each item inside the small items are very detailed lists of categories, as long as the IDE is correctly installed, as well as configured JDK, SDK environment, will be detailed listed.

Flutter supports Android Studio, VSCode, andConsole + text editorThe way. If you have VSCode installed, it will also be listed on the command line.

【 key tips 】 according to the prompts to operate, which lack (front isXWhich is configured for the symbol. In general, the command line will give you some hints, such as what command to use, which path to operate under, etc.

Three points need to be noted:
    1. There are four tools for Flutter, all of which are indispensable: the installation package for Flutter itself, the Framework (which is the core code part of Flutter), the Engine (the Engine for Flutter), and the Dart SDK.
    1. Android Toolchain (some tools for developing Android devices), here is the full installation with 7 tools: SDK (SDK path), NDK (NDK path), Platform(Android-27), and build-tools (27.0.3) are configured for the SDK pathANDROID_HOMEEnvironment variables, JDK configuration path, JDK runtime environment version, Android Licenses (protocol).
    1. The Android Studio environment includes the install package path, the Flutter plugin, the Dart plugin, and the JDK version number of AS. I also have IDEA installed here, so I will list its environment as well.

The following are some problems with the missing installation packages:

** The SDK environment variable is not configured, find the SDK path, such as my path is E:\debelop\ SDK, I copy this path, open the environment variable, create a new variable, named ANDROID_HOME, and then add the last variable in the path variable; %ANDROID_HOME\%

** Some Android licenses have not agreed to this issue. Enter flutter doctor — Android-licenses on the command line and press enter. Then you will be asked to enter Y /n.

↓ Other issues: It is basically the configuration of development tools, this is not to say, we should be very familiar with.

The flutter doctor reported an error that the flutter server could not be connected.

The error message is as follows:

Troubleshooting:

First: I have enabled BITS in the computer properties service, and this problem has been resolved. Second: my environment configuration is fine.

Finally I looked at the flutter installation documentation and recommended PowerShell, so I opened the PowerShell command line (must have flutter 5.0+ installed), entered Flutter doctor, and there I was. So to avoid weird errors, download and use PowerShell version 5.0

The current AS version is not supported by the Flutter plugin. The current AS is 3.2, my Gradle build API is 27, maybe the maximum that Flutter can support is 26, sure enough I changed the build version in build.gradle to 26, recompile it, OK.

(5) The system was reinstalled, and the Tool of Flutter was also reinstalled. Because there was no backup of the third-party libraries downloaded from DISK C, a lot of third-party libraries were reloaded when the project was loaded, which was very slow and took a long time to download.

[By the way, I would like to explain how to use the tripartite library] :

Flutter uses external open source packages. Open the pubspec.yaml file and add the dependent libraries to Flutter with Chinese annotations as follows:

"> < span style =" font-size: 14px; line-height: 20px# add dependency library here, than this is the English word libraryEnglish_words: ^ 3.1.0# This is the image selection libraryImage_picker: ^ 0.4.1Copy the code

Format: library name: ^ Library version number

Note: colon is Chinese punctuation, there are some libraries that need ^, don’t forget ^

Open source packages are available at pub.dartlang.org. Adding dependencies directly can be slow,

Can also go directly to https://pub.dartlang.org/packages/ want to rely on libraries, download package directly, and then copy to the following path:

C:\Users\XXX\AppData\ roam \ pub\ Cache\ Hoste\ pub.dartlang.org\(this is also the local path after using the dependency library installation), it is recommended to back up this folder for easy restoration in case of system failure or system reinstallation.

(vi) The simulator is clearly enabled, but AS does not display the simulator, AS shown below:

Then create a new emulator for API 26, and the command line window displays the following error:

(seven) compilation of a demo installation package is more than 30 M, this is too pit bar. Android native APK packages are only a few megabytes at most. However, this is an APK package in Debug mode, and the package size of the signed release version is very small, maybe a few megabytes.

There is a tool for Flutter Inspector, which checks widgets. This tool can be used to diagnose layout rendering problems and view the current view tree structure of your APP. But: the view tree is too deep and seems to be taxing. For details, please refer to the official website: doc.flutter-dev.cn/inspector/

【 Note: 】 Different computer view tree tools display different, may be due to the CPU is x86 or X64, another computer does not have so many layers, which controls are used to display, very clear. As shown below:

The error of the initial Flutter creation project is as shown in the figure below:

Add the following line of code to the end of the idea.properties file and save it. Later, when you open Android Studio to create a project, it will not be stuck:

disable.android.first.run=true
Copy the code

The build directory does not exist after the Flutter is compiled.

[Solution] Click the gear icon next to Project (if not Project, click the inverted triangle button on the right to switch to project view), check Show Excluded Files and it’s OK.

11. Several related learning websites

GitHub

  • Github.com/AweiLoveAnd… Flutter installation and configuration, Flutter development challenges, Flutter sample code and templates, Flutter project practices, Dart language learning sample code.

  • My official account

Websites about Flutter

  • IO /docs/ Official home page of Flutter.

  • The website of Flutter Chinese is the official Website of Flutter – IO. Cn, which contains all the latest information, including videos, blogs, documents and consultation.

  • Flutter Github address github.com/flutter/flu…

Dart Related Websites

  • Open source download librarypub.dartlang.org/All three libraries can be downloaded here.

  • Dart Language official home page www.dartlang.org/ Official home page, English version

  • DartPad online editordartpad.dartlang.org/Online editor for the Dart language

  • DartPad’s Github address github.com/dart-lang/d… DartPad source code.

Blog post about Flutter

Tool installation:

  • Detailed guide to Flutter from configuration and installation to pit filling

The Foundation of Flutter

  • Flutter Fundamentals part 1 — A collection of cross-platform development frameworks and tools
  • The basics of Flutter (2) – The old driver uses a blog post to quickly familiarize you with Dart grammar
  • Fundamentals of Flutter (3) — A thorough explanation of Flutter fundamentals
  • The Foundation of Flutter (4) – a comprehensive summary of Flutter pit filling
  • The foundation of Flutter (5) — The Flutter code template is essential to free up your hands and improve your development efficiency
  • A detailed explanation of the horizontal and vertical layout of Flutter
  • A comprehensive solution to Flutter update Errors

Advancements of Flutter:

  • Steps to Flutter (1) – Get you up and running with the Flutter project quickly
  • Advancements to Flutter (2) — Detailed description of Flutter routing
  • (3) Analysis of the GestureDetector of Flutter
  • Introduction to Flutter (4) — The Future of Flutter
Dart Syntax series
  • The Basics of Flutter (2) – The old driver uses a blog post to quickly familiarize you with Dart grammar (this is the first article in the Dart Grammar series)
  • Dart syntax: Classes and functions
  • Introduction to Mixin
  • Dart syntax: Generics, asynchrony, libraries, etc