“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 code

Note 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 code

Modify 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 code

Once 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 code

This 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 code

Click 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 code

Enter /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 code

After 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.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Getting started with Flutter: Build the environment, create projects, and manage dependencies

Build up the Flutter environment

The Flutter directory is not a clone of the GitHub project

Failed to execute flutter doctor

Android SDK Missing (MAC)

Xcode tools missing (MAC)

Editor missing plug-in

Android License Status Unknown (Windows)

Failed to resolve this remote name: ‘storage.flutter-io.cn’ (Windows)

Upgrade downgrade of Flutter

Create and run the project

Create a project

Mirror warehouse

Run the project

Thermal overload

Management depends on

Getting started with Flutter: Build the environment, create projects, and manage dependencies

Build up the Flutter environment

The Flutter directory is not a clone of the GitHub project

Failed to execute flutter doctor

Android SDK Missing (MAC)

Xcode tools missing (MAC)

Editor missing plug-in

Android License Status Unknown (Windows)

Failed to resolve this remote name: ‘storage.flutter-io.cn’ (Windows)

Upgrade downgrade of Flutter

Create and run the project

Create a project

Mirror warehouse

Run the project

Thermal overload

Management depends on

Related Posts

Rhythmic music beats

The global LESS style is used in Vue projects

Day56: Merge two ordered lists (Question 21)