Setting up Flutter dev environment with VSCode on macOS

Below is a description of setting up a Flutter development environment using Visual Studio Code on macOS.

Prepare VSCode & Flutter

Obviously you'll have to install Visual Studio Code first. :)

Then click the plugins view (on the left sidebar) and install the following plugins:

• Flutter plugin (this should automatically install the Dart plugin as well)
  
• Material Icon Theme plugin

To get the best syntax highlighting and file browsing, also do the following:

• change the Code / Preferences / File icon theme to Material Icon Theme
• change the Code / Preferences / Color theme to Dark+
  

Next, you also need to get the latest Flutter SDK. Just follow the official directions and add make sure to add the path to .bash_profile or .zprofile:

export PATH="$PATH:/Users/username/path/to/flutter-x.x.x/bin"

Set up emulators

You can follow the directions on Flutter's website to enable iOS and Android emulators. You can install new Android emulators using Android Studios AVD Manager... menu.

Once the emulators are ready to go you have to add a Debug Configuration in VSCode...choose the Debug / Add Configuration... menu. The configuration should be the following:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter",
            "request": "launch",
            "type": "dart",
            "program": "${workspaceRoot}/lib/main.dart"
        }
    ]
}

Set up devices

Before you can install to a real iOS device you need to install some more tools with Homebrew:

brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller

Run your app

First you need to start the simulator(s). You can do this from VSCode by openning the command pallet (View / Command pallett...) and typing "emulator" and select "Flutter: Launch emulator". Just select the appropriate platform and version and wait for the simulator to boot.

Alternatively you can just plug in your device via USB.

Any simulator you have booted (or device you plugged in) will become connected and available to choose in the bottom right-hand corner of your VSCode window. Select the desired one and choose one of the following two options:

• Debug / Start debugging... (will give you debug tools)
  
• Debug / Start without debugging... (slightly faster)

Once you are running, the Run/Reload/Hot Reload toolbar should become visible.

Hot reloading

By default any time you save a file in VSCode Hot Reload will run. You can also manually trigger it from the toolbar or using the shortcut key (hover over the toolbar to see what it is).

Run in multiple simulators

If you want to run the app in multiple simulators at the same time, you'll need to launch from command line (you can then press r  to hot reload them):

flutter run -d all

Troubleshooting

Whenever you run into some issues you can run flutter doctor in your project folder. This will give you a report of any project or system configuration problems that you may have.

flutter doctor

Upgrading flutter

I recommend downloading the new version of flutter into a new folder, then setting your bash path to the new flutter path (see above).

After this you should quit VSCode, and run the following in your project's root folder:

flutter pub get
flutter doctor