How to set up devices for Visual Studio Code for a Flutter emulator

Question

I'd like to use Visual Studio Code as my editor for Flutter development, but I don't know how to get the emulator going. I've installed Visual Studio Code on Ubuntu 17.10 (Artful Aardvark).

I followed the first half of instructions as outlined on the Flutter: Get Started page (Create new app). Then I ran into trouble in the second half:

Run the app

1. Make sure a target device is selected in the lower, right-hand corner of VS Code
2. Press the F5 button on the keyboard, or invoke Debug>Start Debugging
3. Wait for the app to launch
4. If everything works, after the app has been built, you should see your starter app on your device or simulator:

The problem is that in that bottom right-hand corner is "No Devices."

How do I connect a device? I can't seem to find instructions anywhere.

Answer 1

You do not need Android Studio to create or run a virtual device. Just use sdkmanager and avdmanager from the Android SDK tools.

Use the sdkmanager to download a system image of Android for x86 system.
E.g., sdkmanager "system-images;android-21;default;x86_64"

Then create a new virtual device using avdmanager.
e.g., avdmanager create avd --name AndroidDevice01 --package "system-images;android-21;default;x86_64"

Then run the new virtual device using emulator. If you don't have it just install it using the sdkmanager.
E.g., emulator -avd AndroidDevice01

If you restart Visual Studio Code and load your Flutter project. The new device should show up at the bottom right of the footer.

Answer 2

For Mac, press cmd + shift + p and type select device and press Enter:

Answer 3

Running the following command on the terminal solved the issue for me:

flutter create .

Answer 4

You can see the bottom menu in VScode, click on this button and you will able to see all the available devices.

Answer 5

Do Ctrl + Shift + P

Type- Flutter:launch emulator

Answer 6

Press ctrl+shift+p and choose flutter: Launch emulator.

Answer 7

For me, when I was running the "flutter doctor" command from the Ubuntu command line - it showed me the below error.

[✗] Android toolchain - develop for Android devices ✗ Unable to locate Android SDK.

From this error, it is obvious that "flutter doctor" was not able to find the "Android SDK" and the reason for that was my Android SDK was downloaded in a custom location on my Ubuntu machine.

So we must need to tell "flutter doctor" about this custom Android location, using the below command,

flutter config --android-sdk /home/myhome/Downloads/softwares/android-sdk/

You need to replace /home/myhome/Downloads/softwares/android-sdk/ with the path to your custom location/place where the Android SDK is available.

Once this is done, rerun "flutter doctor" and now it has detected the Android SDK location and hence I could run avd/emulator by typing "flutter run".

Answer 8

Recently I switched from Windows 10 home to Elementary OS. Visual Studio Code didn't start from Ctrl + Shift + P.

Launch the emulator instead of that. I just clicked the bottom in the right corner no device → Start emulator. It worked fine.

Answer 9

Set "ANDROID_SDK_ROOT" in environment variables. This solved my problem.

Answer 10

Do Ctrl + Shift + P

Then type Flutter:launch emulator

or

run this command in your Visual Studio Code terminal flutter emulators then see the result if you have installed any emulator it will show you. Then to run one of them, use flutter emulators --launch your_emulator_id in my case flutter emulators --launch Nexus 6 API 28

But if you haven't installed any emulator you can install one with flutter emulators --create [--name xyz], and then run your project flutter run inside the root directory of the project.

Answer 11

You can use the 'Android iOS Emulator' plugin and add the Android Studio emulator script to your settings in Visual Studio Code:

Mac: emulator.emulatorPath": "~/Library/Android/sdk/tools/emulator

Windows: emulator.emulatorPath": "<your android home>\\Sdk\\emulator\\emulator.exe

Linux: emulator.emulatorPath": "~/Documents/SDK/tools

Your Visual Studio Code settings are found here: Menu File → Preferences → Setting → User Setting → Extensions → Emulator Configuration. Open command palette, Cmd + Shift + P → type "Emulator"

Answer 12

The following steps were done:

1. installed Genymotion
2. configured a device and ran it
3. in Visual Studio Code, lower right corner, the device shows

Answer 13

You do not need to create a virtual device using Android Studio. You can use your Android device running on Android 8.1 (Oreo) or higher. All you have to do is to activate developer settings, then enable USB DEBUGGING in the developer settings.

Your device will show at the bottom right side of Visual Studio Code. Without enabling the USB debugging, the device may not show.

Enter image description here

Answer 14

Visual Studio Code needs to know where Android SDK is installed on your system. On Windows, set the "ANDROID_SDK_ROOT" environment variable to the Android SDK root folder.

Plus: Always check the "OUTPUT" and "DEBUG CONSOLE" tabs for errors and information.

Answer 15

First, you have to install Android Studio and Xcode to create a phone emulator.

In Visual Studio Code you can use the Android iOS Emulator plugin to set the path of emulator to run.

Answer 16

To select a device you must first start both, Android Studio and your virtual device. Then Visual Studio Code will display that virtual device as an option.

Answer 17

Alternatively, if you enable developer mode and (ADB) is still needed, you can use connect to the device.

To enable developer mode, you go to Phone Settings → About Phone → tap buildnumber seven times.

Once you have it enabled and have the device connected, you can start seeing the device in Visual Studio Code.

Answer 18

You can connect an Android phone via a USB cable and then it will show the device in the bottom bar. (Please note ADB must be installed. Click here for more.)

Or you can completely install Android Studio and set up the emulator from there and run the emulator. Then Visual Studio Code will recognise the emulator and show it at the bottom bar.

Answer 19

From version 2.13.0 of Dart Code, emulators can be launched directly from within Visual Studio Code, but this feature relies on support from the Flutter tools which means it will only show emulators when using a very recent Flutter SDK. Flutter’s master channel already has this change, but it may take a little longer to filter through to the development and beta channels.

I tested this feature, and it worked very well on Flutter version 0.5.6-pre.61 (master channel).

Answer 20

Genymotion settings -> Select ADB Tab -> Select

Use custom Android SDK tools -> Add Android SDK Path (Ex: C:\Users\randika\AppData\Local\Android\sdk)

Answer 21

For those people using a Mac you can go to your terminal and type

$ open -a Simulator.app

and this command will open the simulator.

After that, just go to the Debug option and tap on "Start Debugging"

If you want to test with an Android Emulator:

What I did was to go first to Android Studio and open a virtual Device with AVD Manager. After that you'll see another devices in your Visual Studio Code

In the bottom right you'll see now that you have 2 devices connected. Now, you can test with any of this devices.