Extra: Download the Chrome nuggets plugin and search for the Dart language. My Github project ranks no. 14Welcome to pay more attention!
This article is published on Github. For more information about Flutter and sample code, see my Github:
Github.com/AweiLoveAnd…
Chapter 1, basic introduction
1.1 introduction of Flutter
1.1.1 History of cross-platform frameworks
Here is a simple illustration:
For more details, see my previous post on the evolution of android development
1.1.2 The origin of Flutter
In 2015, Google internally began testing another high-performance programming approach, Google’s Sky project. The Sky project uses Dart, a Web development language, to develop native Android applications, emphasizing the application’s speed and high integration with the Web. Sky is bringing its Web back end to mobile development as well. Sky is platform-independent, and its code can run on Android, iOS, or any platform that includes the Dart virtual machine.
Sky can be said to be the predecessor of the Flutter framework.
At Google I/O 2017, Google launched Flutter, a new open source library for creating mobile apps. The first Beta version of Flutter was released at Mobile World Congress in early 2018, and the Beta3 update was released at I/O in May 2018, making Flutter one step closer to its official release. For a time the attention of the industry to this frame is higher and higher.
For news related to sky’s origin, you can click on the following articles:
Google Sky Open Source project: Develop 120 FPS Android apps without JAVA
Google launches Sky Framework: Write 120fps Android apps using Dart
Sky, Google’s new Android development framework, makes apps smoother
1.1.3 Flutter Architecture
Next time
1.1.4 DartVM
Next time
1.2 Flutter development environment
1.2.1 Install the Flutter development environment
As the content is too long, please see my blog for detailed installation process and precautions. Detailed guide to Flutter from configuration and installation to pit filling
→ Some problems encountered:
(1) Uninstall the environment associated with flutter
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.
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.
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
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:
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.
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).
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:
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:
9. Several related learning websites
Flutter source github link github.com/flutter/flu…
The official documentation of Flutter Flutter. IO /docs/
Doc. Flutter -dev.cn/
The official Dart language home page is www.dartlang.org/
Dart Language Chinese community www.cndartlang.com/
Dart official website www.dart-china.org/
In addition, you are advised to download Nodejs and YARN. It is convenient to use YARN to download update packages. (This is not the point, just understand it)
The yarn’s official website https://yarnpkg.com/zh-Hans/
Yarn Chinese website https://yarn.bootcss.com/
Nodejs Chinese official website https://nodejs.org/zh-cn/
1.2.2 Common Command Lines
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.
1.2.3 Debugging Tools
Next time
1.3 Develop the first Flutter program
1.3.1 HelloWorld case
The process of creating a project is very similar to a normal Android project.
Open AS and click File –> New Flutter Project to see 3 different Project templates
Explain the meaning of these three types:
Flutter Application Project
This is the type created in this article. Details will be explained below.Copy the code
The Flutter Plugin project
When we created the Flutter Plugin, we found that the Flutter Plugin had a directory named ourselves. This is a local lib library that can be configured in the 'pubspec.yaml' file for use in the project. As shown below:Copy the code
Flutter Package project
Open AS, click File –> New Flutter Project, 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 (_).
(3) 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 click on the menu bar 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 on the yellow lightning icon
(5) Run hello World
Dart and Run the emulator, as shown in the figure below. The top is an AppBar with text in the middle and a FloatingActionButton in the lower right corner. Click FAB and add one to the text number in the middle:
Here is a screenshot after I clicked it twice:
1.3.2 Program structure
Open the program you just created and switch to the Project view to see the structure of the project:
The structure of the new Flutter project is different from that of the native Android project. We cannot create modules and libs using android’s multi-module and multi-lib structure, because all our code is done in the lib directory, unless we use native interactive code. You can write in the Android directory and reference the interactive code in the Lib directory.
Android directory
This path contains some code for Flutter to interact with Android native. The file is basically the same as that used to create a separate Android project. However, the configuration of the code is a little different from creating an Android project alone.
Ios directory
Here is some code for Flutter’s native interaction with ios.
Lib directory
Here is the code written in the Dart language, and here is the core code. You can install and configure the environment to run the DART code on the device or emulator on either Android or ios. In the example, this is the main.dart file in the lib directory you are running. We can create different folders under this lib directory to hold different files and write our own code using Dart.
Pubspec yaml files
This is a file to configure dependencies, such as a dependency library to configure a remote PUB repository, or to specify local resources (images, fonts, audio, video, etc.). For example, in pubspec.yaml, cupertino_icons: ^0.1.2 indicates that the project will rely on the cupertino_icons library, whose version number is 0.1.2.
The downloaded tripartite inventory is placed on disk C at the following path: C:\Users\ Username \AppData\ roam \ pub\ Cache\hosted\pub.dartlang.org\XXX Note: This user name corresponds to the user name of your computer, for example, I am Administrator, some people are admin, see your own computer Settings. The following XXX is the name of the library you want to search for. (AppData is a hidden directory, which needs to be set to show hidden files first.) Here is a screenshot example:
1.3.3 Packaging process
(1) Create the keystore certificate
Skip this step if you have already created a certificate. To create a new certificate, run the following command:
Note: The keytool command may not exist in your system environment path. It is part of the Java JDK and is installed with Android Studio when you install it. You can determine the path to the command by running the flutter doctor command, looking at the output path of the Java binary at:, and then replacing the last Java in the full path with keytool.
(2) Reference the keystore certificate in the application
Create a configuration file containing the keystore certificate reference and name it /android/key.properties:
StorePassword =< store password > keyPassword=< key password > keyAlias=key storeFile=<keystore file location, for example: /Users/<user name>/key.jks>Copy the code
(3) Configure signing options in Gradle
Edit your application/android/app/build. Gradle file to configure the signature options:
1. Find Android {and replace it with your configuration file containing the certificate reference:
def keystorePropertiesFile = rootProject.file("key.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
android {
Copy the code
(2) replacement:
buildTypes {
release {
// TODO: Add your own signing config for the release build.
// Signing with the debug keys for now, so `flutter run --release` works.
signingConfig signingConfigs.debug
}
}
Copy the code
