This article will show you how to create a new flutter project integrated with asdf, vscode in a hands-on way.

Environment

• macOS Ventura 13.4.1 (M1)
• Homebrew 4.0.24
• VSCode 1.79.2
• Xcode 14.3.1
• Android Studio Flamingo
• Chrome 114.0.5735.133
• asdf v0.12.0

Prerequisite

If your mac is Apple Silicon Mac, you must have the Rosetta translation environment available for some ancillary tools. You can install this manually by running

sudo softwareupdate --install-rosetta --agree-to-license

And you need to create and start simulators each platforms (Xcode, Android Studio).

• Set up the iOS simulator
• Set up the Android emulator

Of course, you can also connect your own devices to your mac instead of simulators.

After all, create a project.

cd ~ && mkdir my-flutter-project
cd my-flutter-project

Install tools

Add plugins by

asdf plugin add dart
asdf plugin add flutter
asdf plugin add ruby

Install tools by

asdf install dart 3.0.5
asdf install flutter 3.10.5-stable
asdf install ruby 3.2.2

Apply specified version in this project by

asdf local dart 3.0.5
asdf local flutter 3.10.5-stable
asdf local ruby 3.2.2

Install cocapods by

sudo gem install cocoapods

Configure VSCode Setting

Add setting file for this project by

mkdir .vscode
echo -e "{\n  \"dart.flutterSdkPath\": \"$HOME/.asdf/installs/flutter/3.10.5-stable\"\n}" > .vscode/settings.json

And then, install the following VSCode's extensions.

• flutter
• Dart

Check Environment

Check flutter whether it is from asdf.

which flutter
// expected path → $HOME/.asdf/shims/flutter

if you set up correctly, VSCode show you flullter command via command palette.

For example, selecting Flutter New Project

Conveniently, flutter has doctor command. you can check easily your project environment with executing it form terminal.

flutter doctor

Finally, you're ready to start project!

Create Project

Create project by

flutter create .

And create launch.json for debugging multiple devices.

touch .vscode/launch.json

And you can set up some devices what you would like by configure this file.

For example,

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Current Device",
      "request": "launch",
      "type": "dart"
    },
    {
      "name": "Pixel_4_API_30",
      "request": "launch",
      "type": "dart",
      "deviceId": "xxxx"
    },
    {
      "name": "iPhone 14",
      "request": "launch",
      "type": "dart",
      "deviceId": "xxxx"
    },
    {
      "name": "Web(Chrome)",
      "request": "launch",
      "type": "dart",
      "deviceId": "chrome"
    },
  ],
  "compounds": [
    {
      "name": "All Mobile Devices",
      "configurations": [
        "Pixel_4_API_30",
        "iPhone SE (3rd generation)",
        "iPhone 14"
      ]
    },
  ]
}

you can get device ids from xcode or adb devices.

Start flutter app

you can start this project's flutter app from VSCode.