Takuya Iwashiro
Web Dev at Tokyo, JAPAN
Jun 28, 2023
How to set up new flutter project with asdf (June, 2023)
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).
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.
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.