vscode configures the flutter development environment without installing a third-party Android emulator

1. Get Flutter SDK

  1. Click the installation package below to get the latest version of Flutter SDK for the stable release channel: Flutter SDK

  2. Unzip the compressed package, and then place the flutterentire directory in the path where you want to place the Flutter SDK** (be careful not to have a Chinese directory)**

  3. Configure the environment variables of the Windows system. In the User Variables column, add flutter\binthe full path to the directory in Path. For example:
    ![[Pasted image 20230528154354.png]]

  4. After configuring the environment variables, you can open the cmd window of your computer and use the command

flutter doctor
Insert image description here

The above command will check your existing environment and present the detection results in the form of a report. Read what it displays carefully and check to see if there is any software that has not yet been installed or if there are additional steps that need to be completed (usually in bold ).
The following problems usually occur during the first installation:

[-] Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.cn/docs/setup/#android-setup for detailed instructions.


This is because we have not configured the corresponding Android development environment. Next, configure the Android environment.

2. Configure the Android environment

  1. Download and install Android Studio .

  2. Run Android Studio and go into settings to configure the Android SDK version you want to run.
    ![[Pasted image 20230528155115.png]]

  3. 'Android Studio Setup Wizard', which will install the latest Android SDK, Android SDK Platform-Tools and Android SDK Build-Tools, which are required when developing Android Flutter applications. You also need to install the Android Emulator to start the Android virtual machine in vscode.
    ![[Pasted image 20230528155257.png]]

  4. Run flutter doctorMake sure Flutter has located the installation location of your Android Studio. If Flutter is not located, run to flutter config --android-studio-dir <directory>set your Android Studio installation directory.

3. Configure Android devices in Android Studio

3.1 Enter Device Manager to configure Android devices

![[Pasted image 20230528155814.png]]

3.2 Create an Android virtual machine

![[Pasted image 20230528160327.png]]

3.3 Select x86 image

![[Pasted image 20230528160404.png]]

3.4 Configure hardware acceleration

![[Pasted image 20230528160448.png]]

3.5 Start the emulator

![[Pasted image 20230528160529.png]]

4. Configure vscode

1. Install Flutter and Dart plug-ins

  1. Open VS Code.

  2. Open View > Command Palette… .

  3. Type "install" and select Extensions: Install Extensions .

  4. Enter "flutter" in the extended search input box, then select Flutter in the list and click Install . The necessary Dart plugins are automatically installed during this process.

  5. Click Reload to Activate to restart VS Code.
    Or click Extension directly on the left side of vscode
    ![[Pasted image 20230528160738.png]]

  6. Just install the flutter library (dart library will be added automatically)
    ![[Pasted image 20230528160828.png]]

5. Create a new flutter program

Create app

  1. Open View > Command Palette .

  2. Enter "flutter" and select Flutter: New Project .

  3. Select Application .

  4. Create a new or select the upper directory where the new project will be stored.

  5. Enter a project name, for example my_app, and hit Enter .

  6. Wait for the project to be created and main.dartthe file to appear in the editor.

This command will create a file named myapp, which contains a simple sample program using the Material component .

6. Start the program

1. Select which emulator to start

![[Pasted image 20230528161321.png]]

2. Start

Press F5 or start in the upper right corner, you can see that the simulator is debugging the initial code
![[Pasted image 20230528161459.png]]

Guess you like

Origin blog.csdn.net/qq_45372719/article/details/130914026