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 codeHowever, 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