preface

I found that many of my friends were stuck with the Flutter environment installation, either because the SDK or Android Studio download was too slow. Either the environment variable is never set correctly; Or the emulator in Android Studio doesn’t work. All in all, problems encountered in the installation environment have dampened enthusiasm for learning Flutter. I use a Mac, but for this article I installed a virtual machine to run Windows, trying to pull back the hearts that were blocked at the door.

Download required Software

Please note that this tutorial uses Windows 10 64-bit, please download the correct version.

  • Flutter_windows_1. 22.4 stable. Zip
  • Android – studio – ide – 191.5977832 – Windows. Exe
  • MuMuInstaller_1. 1.1.3 _nochannel_zh – Hans_1605171219. Exe
  • VSCodeUserSetup x64-1.51.1. Exe

All the above software, I have uploaded to the 115 network disk for everyone. Please give a thumbs-up!

115. com/s/sw3c4kj3h… Access code: G5d4

Configuring the Development Environment

Novice white please follow my Settings completely please ignore

1: because the SDK

Unzip Flutter_windows_1.22.4-ststable. Zip to get a folder named flutter. Move this folder to C:\flutter. As is shown in

You can then double-click flutter_console.bat in that directory

A command prompt will open automatically and we will find that the flutter command is already available here if we type flutter Doctor.

However, we will be prompted that the Android SDK is not yet available and we will need to install Android Studio first.

This prompt will still appear if you have installed Android Studio and are not using the default address, so be sure to use the default address, and skip ahead to the advanced section if you are using a custom address.

2: Install Android Studio

Download and install Android-Studio-IDE-191.5977832-windows.exe

After the installation is complete, Android Studio will be checked by default

3: Install the Android SDK

Note that when you open Android Studio, cancel is selected

Then we’ll see Android Studio prompt us to configure the development environment

This tutorial is not developed using Android Studio, so pick a random UI theme

This is the time to download the Android SDK, some peoplemayYou can’t use the Android Studio emulator directly. Later we will show you how to use a third-party independent Android emulator. Now check Android Virtual Device.

The recommended values are used directly here

There will be a screen to remind you of the choices that you just completed. OkFinish

We will enter a relatively long download and installation process, the speed is ok, please wait patiently.

After the installation is complete, you will see the following screen, the red box part of the prompt, you may have some differences.

Install the Flutter plugin in Android Studio

To reopen Android Studio again after completing the previous step, click Configure in the lower right corner

Choose the Plugins

Then search for Flutter, which may be slow here, so be patient. Without a ladder, I came out after a while.

When you select Install, you’ll be prompted to Accept a bunch of crap

You will also be prompted that the Flutter plugin depends on another Dart plugin (Yes, of course).

We will then enter the download process and wait for the download to complete, prompting us to restart Android Studio.

We can also confirm this by going to the Installed TAB

Click on the Restart the IDE

5: Android emulator

At this point we go back to 1, double-click on C:\flutter flutter_console.bat and enter flutter doctor. We will see that the exclamation mark in front of Android Studio has changed to ✔️. But there’s still an x there.

As prompted, enter the command flutter doctor –android-licenses

In this type of interface, you just type y and press Enter. There are 7 in total, do not care about the number, in short, All y until we see All SDK Package licenses accepted

We enter flutter Doctor again

At this point we can see that the flutter doctor has all the necessary parameters to verify ✔️, but the flutter command can only be run by double-clicking flutter_console.bat.

6: Set environment variables

To enable the flutter command to be used whenever the command prompt is opened, we need to set the environment variable.

Open the control panel and go to user account \ User Account

Click Change my environment variable

The inputC:\flutter\binThen press Enter, hit OK, and close the control panel.

When we open the command prompt, we can use the flutter related commands

7: Install VSCode and the Flutter plugin

There’s nothing to say about installing VSCode, go to next, open VSCode after installing, and click on the plugins (extensions) panel

Search for and install the Flutter plugin. Similarly, the Dart plugin will automatically install for us when the Flutter plugin is installed.

Run the Flutter project using a third-party Android emulator

There are many people who can’t use AVD Manager to create an Android emulator, requiring BIOS setup and so on. There are many tutorials online that teach you another way to run the Flutter project using a third-party Android emulator, such as the netease Mumu emulator.

1: Create a Flutter project

Use flutter create XXXXX (XXX is the project name, choose your own)

Hitting Enter will help us create a Flutter project template,flutter pub getSome base dependency libraries will be downloaded from the network, which will most likely stop there (if successful, ignore the following environment variable configuration).

1.1: Configure mirror environment variables

Because the domestic network is directly connected to Google’s service, we need to configure the address of the mirror station.

Open theThe control panelAnd into theUser account \ User account, click on theChange my environment variablesAnd then we select New

  • Add the first one: PUB_HOSTED_URL
https://pub.flutter-io.cn
Copy the code

  • Add the second: FLUTTER_STORAGE_BASE_URL
https://storage.flutter-io.cn
Copy the code

After adding, you may need to reboot your computer

Then run the flutter Create XXXXX again and the flutter should be created successfully

If the flutter fails after a long time, CTRL + C cancels and rerun the flutter create XXXXX… Until you succeed. If this still fails, visit pub. Flutter – IO. Cn in your browser to see if it succeeds. I have installed several times during the preparation of the tutorial, and there was indeed one time that the PUB get failed, which took more than 2 hours and changed the environment variables that could be set. The last thing you do is you cancel it, and then you run it again.

2: Run the Flutter project into the Android emulator

Use VSCode to open this folder and pressF5Run. You’ll notice that there are no Android emulators. As mentioned earlier, this article teaches you how to use third-party emulators, such asNetease with complte patternsTo debug the Flutter application

2.1: Install the netease MUMU simulator

It is best to pass all of them directly. If you do not support VT-X as I did, ignore it for the time being and continue clicking

After the netease MUMu installer downloads all the installation packages and the installation is complete, the simulator will be opened automatically

Click on the bottom right to rotate the screen to switch to portrait. Then open the command prompt and CD to the installation directory of netease MUMu simulator

cd C:\Program Files (x86)\MuMu\emulator\nemu\vmonitor\bin
Copy the code

Adb_server. Exe connect 127.0.0.1:7555Copy the code

Now let’s go back to VSCode and pressF5Then you can run the debug Flutter APP

Wait patiently for Gradle Task to run. Since the Android kernel version of netease Mumu simulator is 29, it will prompt us to download the corresponding kernel API in Android Studio. Open Android Studio, click Configure in the lower right corner of the welcome screen, and select AVD Manager

Select any device model, go to the next page and select API Level 29 kernel download

Now go back to VSCode and pressF5Run it successfully inNetease with complte patternsDebugging our Flutter application in the simulator

In this step if you encounter errors [ERROR: flutter/shell/gpu/gpu_surface_gl. Cc (58)] Failed to setup Skia Gr context.

In the terminal of the VSCode project, use the following command to start the project

flutter run --enable-software-rendering
Copy the code

However, this method will cause Hot Reload failure, so you need to manually enter r in terminal.

In this paper, the


Recent articles (thanks for your encouragement and support 🌹🌹🌹)

  • 🔥 Use iconfont in Flutter… 26 upvotes for one-click generation of the Dart class
  • 🔥 teaches you from 0 to 1 to write a JS multilingual library 18 likes
  • 🔥 made a night of animation, in order to let everyone better understand Vue3 Composition Api 787 likes