This can be seen with Flutter, the hot cross-end toolkit that has more than 120K followers on Github.

As I am currently learning Flutter, I will record the whole learning process.

This blog post mainly explains the construction of the environment, the first to build a good project, run through the demo to have the need to play and sense of achievement, right?

Personal development environment

  • MacOS Big Sur Version 11.2 Chip Apple M1

  • Disk space: > 2.8 GB (minimum required space)

  • $SHELL

echo $SHELL
/bin/bash
Copy the code

The problems that appear and are solved after ⚠️ are based on my environment

Install the Flutter

Download the installation package from the official website.

Put the installation package where you want to store it. Here I put documents -> SDK for easy management and then unzip the download package.

Configure the PATH environment variable of the FLUTTER in the following format:

export PATH=$PATH:${pwd}Flutter/bin or /export PATH=${pwd}/flutter/bin:$PATH
Copy the code

Here I need to edit the ~/.bash_profile file and add the following line:

export PATH=/Users/jimmy/Documents/sdk/flutter/bin:$PATH
Copy the code

Install the IDE

As a front-end developer, I prefer VS Code and just install the stable version.

Because you need to debug the Android platform, you also need to install the editor Android Studio. Android Studio provides a complete integrated development environment for Flutter.

Both VS Code and Android Studio need to install the Flutter plugin.

Android Studio I still install in Documents -> SDK

Note the path to install Android Studio, which may cause SDK errors. Similar error ❌

# [Flutter-Unable to find bundled Java version(flutter doctor), After Updated Android Studio Arctic Fox(2020.3.1) on M1 Apple Silicon](https://stackoverflow.com/questions/68569430/flutter-unable-to-find-bundled-java-versionflutter-doctor-after-up dated-andro)
Copy the code

Flutter – unbundled -find-bundled- Java -versionflutter-doctor-after-updated-andro

validation

After that, run the Flutter Doctor or flutter doctor-v to check that the necessary installation packages are installed.

Here is the situation of building your environment flutter doctor-v:

✓] Flutter (Channel stable, 2.2.3, on macOS 11.220d64 darwin-arm, ✓ Locale useful - Hans - CN), Flutter version 2.2.3 the at/Users/Jimmy/Documents/SDK/Flutter, Framework revision f4abaa0735 (9 Weeks ago, 2021-07-01 12:46:11-0700 • Dart Version 2.13.4 [✓] Android Toolchain - developforAndroid devices (Android SDK version 31.0.0), the Android SDK at/Users/Jimmy/Library/Android SDK Platform, Android - 31, • Java binary at: / Users/Jimmy/Documents/SDK/Android Studio. The app/Contents/jre/JDK/Contents/Home/bin/Java, Java version its Runtime Environment (build 11.0.10+0-b96-7249189) • All Android licenses accepted. [✓] xcode-developforIOS and macOS, Xcode ats/Applications/Xcode. The app/Contents/Developer, Xcode 12.5.1, • CocoaPods version 1.10.2 [✓] Chrome - DevelopforThe web, Chrome at/Applications/Google Chrome app/Contents/MacOS/Chrome / ✓ Android Studio (version 2020.3) Android Studio at /Users/jimmy/Documents/sdk/Android Studio.app/Contents# Pay attention to the Android Studio path• Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter, Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart, Java version its Runtime Environment (build +0-b96-7249189) [✓] VS Code (version 1.59.1) • VS Code at /Applications/Visual Studio code. app/Contents • Flutter Extension version 3.25.0 [✓] Connected device (1 available) • Chrome (Web) • Chrome • Javascript • Google Chrome • No issues found!Copy the code

No issues found! “, that you are successful ~

Run the Demo

Let’s create a new project on VS Code:

View -> Command Panel -> Flutter: New Application ProjectCopy the code

After initializing the project, run -> Start debugging and then run the application as shown below:

If you select Chrome Web, it will directly bring up your installed Chrome browser.

If you select Start iOS Simulator, it will Start xCode’s Simulator.

If you select Start Pixel 2 API 31 will call up the Emulator of Android Studio.

Of course, you need to preset the phone model in Android Studio, otherwise VS Code will not work the first time.

【 finish 】 ~ next time can be more fun