“This is the 16th day of my participation in the First Challenge 2022. For details: First Challenge 2022”
Build up the Flutter environment
This step is easy, follow the instructions on the website step by step. Official address: FlutterChina. club/get-started…
I would like to focus on the inaccurate expression of the official website and the problems occurred in the construction process. I installed it based on the MAC environment.
The Flutter directory is not a clone of the GitHub project
Running the flutter doctor reported the following error:
Error: The Flutter directory is not a clone of the GitHub project.
The flutter tool requires Git in order to operate properly; to set up Flutter, run the following command: git clone -b beta https://github.com/flutter/flutter.git Copy the code
The official document allows you to download it from the official website, but you need to climb the wall to do so.
Another suggestion is to download the Release package from Github and decompress the installation. After configuring the environment, you will get an error when you run flutter Doctor.
Can only say that the official documents really can not be trusted, there are two ways to deal with online:
1) Go to the flutter directory and git init to create a.git directory. Failed to execute flutter doctor because there is no git commit record.
(2) don’t have to download the release package of clone down directly, such as tip recommended git clone – b beta https://github.com/flutter/flutter.git using beta branch. Then reconfigure the environment and execute flutter Doctor.
However, the Flutter project is a little big, and the download is very slow. I cannot change the agent, and it has failed over time. Later I thought, since I have gone over the wall, why not go to the official website to download flutter. IO/sdK-archive… (Stable Channel version), this package is also very large, git history is complete, but it downloads quickly after climbing the wall. Decompress the configuration environment and run the following command.
(3) For the other method, we only clone the latest commit during clone because the project was too large and timed out. In other words, we add the parameter depth=1 during clone.
Git clone –depth= 1-b beta github.com/flutter/flu…
I tested that the flutter Doctor worked on Windows and executed the flutter Doctor successfully.
Failed to execute flutter doctor
When the execution fails, the terminal logs will indicate the reason for the failure and even provide solutions, for example:
Android SDK Missing (MAC)
Those who qualify Flutter requires Android SDK 28 and the Android BuildTools 28.0.3
To update using sdkmanager, run: "/Users/xxx/android-sdk-macosx/tools/bin/sdkmanager" "platforms; android-28" "build-tools; 28.0.3 "or visit https://flutter.dev/setup/#android-setup for detailed instructions.Copy the code
Implement “/ Users/XXX/android SDK – macosx/tools/bin/sdkmanager” “platforms; android-28” “build-tools; 28.0.3” command can be downloaded, be careful not to break the line
Xcode tools missing (MAC)
Qualify CocoaPods not installed. CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To install: sudo gem install cocoapodsCopy the code
Execute sudo gem install Cocoapods as prompted to install cocoapods
Editor missing plug-in
[!] IntelliJ IDEA Ultimate Edition (version 2019.2.3)
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
Install the Flutter plugin directly in The Preferences -> plugins for Android Studio or IntelliJ IDEA
Note that if you have both editors installed, plug-ins will need to be installed for both, or you will uninstall the unneeded editors
Android License Status Unknown (Windows)
[!] Develop Toolchain for Android Devices (Android SDK Version 28.0.3)
X Android license status unknown. Try re-installing or updating your Android SDK Manager. See Developer.android.com/studio/#dow… Or visit flutter. Dev/setup / # android… for detailed instructions.
We need to update the SDK Manager. Bat file in SDK directory /tools/bin is required in Windows.
We run XXX \tools\bin\ sdkManager –update to update the SDK Manager.
But executing this command also returns an error:
Unsupported major, minor version 52.0
If your JDK is below 8.0, use JDK 8.0 or later.
Perform sdkmanager – update
Note that this command will take a long time to download, and there is no log, as if stuck, wait patiently. Most importantly, sometimes the end of the file does not prompt, so pay attention to the SDK file, if there is no change in the file for a long time may be finished, directly CTRL + C exit, then may print done)
Error:
Warning: An error occurred during installation: Failed to move away or delete existing target file: D:\android-sdk\sdk\tools
Move it away manually and try again..
The tools directory is obviously used for the upgrade, but the sdkManager. bat file we executed is also in this directory, so deleting the occupied directory must fail.
The solution is to rename the Tools directory to Tool (or some other irrelevant name) and then execute sdkManager –update, which creates a new Tools directory and places the SDK Manager related files of the new version under it. The renamed tool directory is useless after the upgrade.
Failed to resolve this remote name: ‘storage.flutter-io.cn’ (Windows)
Problem with flutter doctor execution on Windows and FLUTTER_STORAGE_BASE_URL and PUB_HOSTED_URL added to environment variables.
Restart the terminal and run it again.
Upgrade downgrade of Flutter
Flutter Web has been in private beta and has not been officially launched. Therefore, all our Flutter Web related projects use beta versions of Flutter.
Flutter2.0 has come, some API changes have been made, especially the Web has changed a lot compared to the beta version, and many third party SDKS have not been updated in time, so it may be a big problem to upgrade to 2.0.
So we have a branch dedicated to the 2.0 upgrade, and the main branch still uses beta 1.x. How does this quickly switch the Flutter SDK?
Git is used to switch to the stable branch of the flutter directory and pull up the latest code, which should be the 2.x version of the flutter.
commit b1395592de68cc8ac4522094ae59956dd21a91db (HEAD -> stable, tag: 2.0.4, origin/stable, origin/flutter – 1.26 – candidate. 17)
Then execute the Flutter doctor wait to complete. This will upgrade the SDK to 2.0.
If you want to switch back to 1.x, switch the branch back to beta, and then use git reset to switch to the corresponding COMMIT, for example
commit 81a45ec2e5f80fa71d5135f1702ce540558b416d (HEAD -> beta, tag: 1.21.0-9.2. The pre, origin/flutter – 1.21 – candidate. 9, origin/beta)
This should switch the flutter code back to 1.x and wait for the flutter doctor to complete.
Create and run the project
My editor here is Android Studio 3.2
Create a project
After installing the FLUTTER plugin, you can create a project. See flutterChina.club /get-started…
After the project is created, the directory structure is as follows:
There are three main categories:
- Android – Android project code
- Ios-ios project code
- Lib-flutter code
There is also a pubspec.yaml file, which is a project configuration file, such as managing project dependencies, described in more detail later.
Mirror warehouse
There may be some problems after the project is created and built.
For example, downloading dependencies will fail without scaling the wall. We need to add ali mirror repository to build.gradle in the Android directory
repositories {
google()
maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/' }
maven{ url 'http://maven.aliyun.com/nexus/content/repositories/jcenter'}
jcenter(){ url 'http://jcenter.bintray.com/'}}Copy the codeNote also that the latest version of each dependency is automatically used when creating the repository. However, due to the update frequency, the latest version may not exist yet. In this case, you can reduce the version.
This is because flutter itself has dependencies. How do I add a mirror store of changes to flutter?
We know that Flutter itself relies on some Java or Android tripartite libraries, which need to be pulled from the Bintry repository or Google repository at compile time.
However, due to problems with domestic walls, it was difficult to access foreign warehouses, so mirror warehouses needed to be set up for FLUTTER.
How to set up mirror repository for FLUTTER?
This is because the Gradle files for Flutter itself are not in the project and are in the flutter installation directory.
Also note that more than one Gradle file needs to be modified. These files are in the flutter installation directory flutter> Packages > Flutter_tools >gradle.
Include:
- fultter.gradle
- resolve_dependencies.gradle
You can see the repository configuration in each of these files
repositories {
google()
jcenter()
}
Copy the codeModify here, add mirror repository dependencies can be smoothly downloaded down.
repositories {
google()
maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/' }
maven{ url 'http://maven.aliyun.com/nexus/content/repositories/jcenter'}
jcenter(){ url 'http://jcenter.bintray.com/'}}Copy the codeOnce the mirror repository is added, the project is ready to compile, but there’s really no end to the repository.
When our project needs to rely on the third-party Libraries of Flutter, this android code may also rely on android or Java packages from other third parties in Gradle, because the libraries may also contain Android code. In this case, the download is still not successful.
How to do? Section 3 of this article, “Managing dependencies,” provides a solution.
Run the project
Create and run the project.
You can also launch the ios emulator in Android Studio
There will be an ios device option when the emulator is fully started
Select this device to run the project on the ios emulator.
Note here that sometimes the emulator is fully started, but there are no additional devices in the options. Close the emulator and restart it.
Thermal overload
Hot reloading is one of the features of Flutter. It can update running code directly without rebooting the app.
When we have the project running on the device, we change the code, such as “Hello World” to “Hello World! “, simply call Save All (cmD-s/Ctrl-s) or click the hot reload button (the button with the lightning ⚡️ icon).
You can see that the content on the page changes without the application being reinstalled or even restarted.
Another problem with this piece is that the stop button cannot be pressed or the device is disconnected. If we unplug and plug in the tester, we will find that thermal overload failure, the solution is very simple.
After the device is connected, the hot reload button (with the lightning ⚡️ icon) turns gray, indicating that the function is invalid. Click the button next to it to resynchronize the code, as you can see on the Console
Waiting for a connection from Flutter on Redmi 5 Plus…
Syncing files to device Redmi 5 Plus…
When the synchronization is complete, the hot reload button (with the lightning ⚡️ icon) lights up and you can use the hot reload feature.
Let’s change the code to save and you can see it in the console
Initializing hot reload…
Syncing files to device Redmi 5 Plus…
Reloaded 1 of 478 libraries in 600ms.
Management depends on
In Flutter we also introduce external packages by means of dependencies. As mentioned above, pubspec.yaml is a project configuration file that has this section
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^ 0.1.2
//TODO Add additional external packages
dev_dependencies:
flutter_test:
sdk: flutter
Copy the codeThis is the obvious place to manage dependencies.
After adding our external package in the format, such as
webview_flutter: ^ 0.3.19 // You can find the name and version number at https://pub.flutter-io.cn/
Copy the codeClick the Packages Get in the upper right corner to download dependencies, which can be seen in the console
/Users/bennu/flutter/bin/flutter –no-color packages get
Running “flutter pub get” in fluttertest… 0.4 s
Process finished with exit code 0
Then it’s ready to use.
Please refer to the official document flutterChina. club/get-started…
In section 2, “Mirror Repository”, we mentioned that the tripartite Library of Flutter could not be downloaded and compiled smoothly because the library depended on android library or Java library.
Webview_flutter, for example, relies on Guava.
We also need to set up the mirror repository for them, but where is the Gradle file?
For example, we added webview_flutter above. After adding webView_flutter, click “Packages Get” to bring the library into the project
Webview_flutter: file:///Users/xxx/flutter/.pub-cache/hosted/pub.flutter-io.cn/webview_flutter-0.3.19+5/lib/
Copy the codeEnter /Users/ XXX /flutter/. Pub -cache/hosted/pub.flutter-io.cn/webview_flutter-0.3.19+5 and you will find an Android directory.
This directory is the Android module in the library, so just modify build.gradle in this directory to add the mirror repository
repositories {
google()
maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/' }
maven{ url 'http://maven.aliyun.com/nexus/content/repositories/jcenter'}
jcenter(){ url 'http://jcenter.bintray.com/'}}Copy the codeAfter adding the save file, go back to the project to compile and run. You will find that all the three packages that webview_flutter depends on have been downloaded and the project has compiled and run properly.
Now that everything is ready, we can begin our formal trip to flutter learning.