Note: This article is republished from the personal public number (Island front island)

Flutter is Google’s mobile UI framework for quickly building high quality native user interfaces and applications for mobile (iOS & Android), Web, desktop, and embedded devices from a single code base.

Windows, macOS, and Linux also have different installation instructions

Basic environment and configuration

I use Windows as an example.

System requirements:

  • Operating system: Windows 7 or later (64-bit)
  • Disk space: 400 MB (not including disk space for Android Studio).

Environment:

  • Flutter SDK
  • Android suite

Flutter Chinese mentions that you can use the SDK installation package provided on the Flutter website.

Tools:

  • Git for Windows

Note: I got an error when TRYING to run a Flutter project using the Flutter SDK installation package, so IT is advisable to clone the Flutter project via GitHub.

The first step is to add this configuration to the system environment variable:

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

Note: Some FLUTTER commands need to be networked to get data. If you are visiting domestically, a direct visit will probably not be successful for well-known reasons. PUB_HOSTED_URL & FLUTTER_STORAGE_BASE_URL is a temporary mirror created by Google for Chinese developers. For details, see Using Flutter in China.

After completing the configuration and clone the flutter project from GitHub, configure the bin directory in the Flutter folder into the system environment variables.

PATH=xxx\flutter\bin
Copy the code

Command and environment check

Open a new command line window (CMD) to use the flutter command on the command line.

(Click to view a larger view of the flutter command output)

If the above command line instructions appear, then you have configured the Flutter environment correctly.

At this point, open VS Code and enter the Flutter installation support extension in the Plugin store.

Installing this extension automatically installs the Dart SDK and related support extensions.

After the wait, restart the VS Code extension and it will work.

When the preceding steps are correct, enter the command line interface (CLI)

flutter doctor
Copy the code

The command follows the official instructions: the first time you run the command, it downloads its own dependencies and compiles itself, and later runs will be much faster.

But!! One thing it doesn’t go into too much detail is that it checks the environment configuration information associated with it, the associated SDK, and the installation environment associated with the IDE.



(Flutter environmental inspection)

Environmental inspection of Flutter:

  • Android development environment and Android SDK
  • Visual Studio Development tools and environments (optional, preferably)
  • Android Studio IDE (optional, better available)
  • Connected Device (Real machine or VIRTUAL machine)

OK, when the Flutter Doctor detects no obvious errors, you can consider creating a Flutter project.

Hello Demo

A project can be initialized directly with the flutter create command 

flutter create myapp
Copy the code

After a while, the project is created. After the project is created, access the project directory.

cd myapp
Copy the code

Now you can see the project directory structure.

If you need to connect to a real machine or virtual machine, you need to check device information via flutter Devices.

flutter devices
Copy the code

When everything is normal, this command checks the device and displays the device information on the command line.

Then, let’s run the project!

flutter run
Copy the code

Just a moment… For a while… For a while…

If all goes well, you should see a demo of the Flutter Create on your device.



(Flutter demo-Android)

Error running Gradle

But!! Unfortunately, you will probably get an error!! Don’t ask why!! (For well-known reasons, you know!)

This is what you see 👇

In the first place! Don’t panic, don’t be afraid! Wet the towel to cover your mouth and nose, low or squat down to escape in an orderly manner…

Emmmmm… I’m sorry. I’m on the wrong set.

Replace mirror warehouse

The main reason is the inability to access the Internet, which leads to the inability to obtain relevant package information.

No matter, find your Clone Flutter project folder and go to:

Flutter -> packages -> Flutter_tools -> gradle Find Flutter. Gradle file.

Annotate the Google () & JCenter () methods under BuildScript -> Repositories.

Then add the Maven repository image provided by Aliyun for replacement

maven{ url 'https://maven.aliyun.com/repository/google' }
maven{ url 'https://maven.aliyun.com/repository/gradle-plugin' }
maven{ url 'https://maven.aliyun.com/repository/jcenter' }
maven{ url 'https://maven.aliyun.com/repository/public' }
Copy the code



(Replace warehouse image)

Then execute the flutter run command again to see the properly executed Flutter project demo.

I wish you all a build. If you still have problems after trying many times, please take off. I don’t know you

conclusion

  • The official document is a good helper for you to get started. Please read it carefully.
  • Analyze and summarize the problems carefully.
  • Sometimes a reboot is an option.

reference

  • Flutter Chineseflutterchina.club
  • GitHub addressGithub.com/flutter/flu…