I’ve been developing Android apps with Android Studio since it first came out. So when Flutter arrived, it felt very natural to keep using it. As Flutter begins to support more and more platforms, though, it’s starting to feel wrong to use an IDE called Android Studio.
It’s not only that. I’ve played around with Visual Studio Code a few times, and I like how light weight it is. It starts up right away and there’s a clean interface. Android Studio by comparison is much heavier, and while it doesn’t take terribly long to start up, it’s not an insignificant amount of time.
Besides, all the cool people use VS Code. OK, not really, but a lot of cool people are using it. They must have a reason, right?
Fine, I don’t have a good reason for switching. I just am.
How do I even start a new Flutter project?
In Android Studio it was easy. I just went to File > New > New Flutter Project.
Not so in VS Code. In VS Code you have to go to View > Command Palette and then start typing
flutter. Choose Flutter: New Project when it shows up in the list.
I have to say, that was not intuitively obvious.
Default Visual Studio Code settings
In Android Studio, when creating a Flutter project you get the choice to create an application, package, plugin, or module. You can also choose the package name and platform channel language (Java/Kotlin and Obj-C/Swift).
No such choices in VS Code. I am only allowed to chose the project name and location. It assumed I wanted to create an application with a package name of
com.example.myapp with a Kotlin/Swift combo. Unfortunately I don’t own the example.com domain, so… you guessed wrong, buddy, you guessed wrong. I also never really got that good at Kotlin, so I’d prefer to use Java if I need to use a platform channel. How do I update these defaults?
Go to Settings. That’s Code > Preferences > Settings on a Mac. It’s probably something nicer like File > Settings on Windows. In the Search settings bar type
flutter. Then choose Dart & Flutter under Extensions.
Note: VS Code has settings for Users and for Workspaces. You can think of a workspace like a project, though it can include multiple root folders. Read more here.
Scroll down to the following options to reset the defaults:
- Dart: Flutter Create Android Language
- Dart: Flutter Create IOSLanguage
- Dart: Flutter Create Organization
The languages are easy enough to change, but for the default organization you have to edit the settings.json file. Add this line to the JSON list:
You can replace my domain with your own unless you want to give all your apps to me.
Or just learn to use the command line
I’ve gotten a little spoiled by the GUI behemoths like Android Studio and Xcode. Because of them it took me a long time to learn command line tools like git.
Flutter also has a command line interface (CLI) that is quite powerful. I was already familiar with
flutter doctor and
flutter channel, but
flutter create is the way to create a new project. You can specify exactly what you want on the command line.
Create a new Flutter project using all the defaults (including
flutter create my_project
More likely, you’ll want to specify the organization:
flutter create --org dev.suragch my_project
If you don’t want the default languages of Kotlin or Swift, you can specify it with the
-a (for Android) or
-i (for iOS) options.
flutter create --org dev.suragch -a java my_project
And if you want to create a package or plugin instead of an app, there is an option for that, too.
flutter create --org dev.suragch --template=plugin my_plugin
Finally, if you are like me and forget everything I just told you (because I know I’m going to forget everything I just wrote), you can remind yourself like this:
flutter create --help
For more help with the Flutter CLI, use
flutter --help and read this article.
Once I had a new project created, there were quite a few common tasks that I knew how to do easily in Android Studio, but didn’t know in VS Code.
Showing the context menu
In Android Studio you can press
Option+Return (Mac) or
Alt+Enter (Linux/Windows) to show a context menu with lots of useful options.
The way to get that in Visual Studio Code is to do the following:
You can use the same
Ctrl+.) trick to create a class that doesn’t exist yet.
Or to add a missing import:
Accessing the Terminal
In Android Studio, there is a tab at the bottom to easily access the Terminal for your project’s root folder.
In VS Code you can show the terminal with the following shortcut:
Control+`(that’s the grave accent or tilde key)
Saving your work
Android Studio automatically saves your work. In VS Code, though, you have to manually save any changes that you make. I don’t know how many times it’s happened that I wonder why the edit I made isn’t taking effect, only to realize that I hadn’t saved the file yet.
Of course, you can save manually like this:
- Save all:
Or even by pressing the icon in the project explorer:
But if you want to have it save automatically like in Android Studio, then go to File > Auto Save.
Adding new files and folders
It’s much more convenient to add new files and folders in VS Code than in Android Studio. Just press the New File or New Folder icon.
See the Extensions section below if you would prefer to do it from the keyboard.
There are lots of keyboard shortcuts that I had grown familiar with in Android Studio. Unfortunately, many of them are different in VS Code.
Here is a comparison of some of my favorites:
Note: Deleting the line in VS Code is officially
Ctrl+Shift+K), but if you don’t care if you are cutting the line into memory,
Ctrl+X) without a selection is easier and more memorable.
Same for both
Thankfully some keyboard shortcuts are still the same in both IDEs:
- Find in project:
- Go to source code:
VS Code specific shortcuts
I’ve already described earlier how to get to the Command Palette using the menu, but here is the shortcut:
- Command Palette:
Mapping the Android Studio shortcuts to VS Code
If you don’t feel like learning the new shortcuts, there is also an extension that will let you use most of the Android Studio shortcuts:
If you want to look up more shortcuts, here are the cheat sheets:
Run a Flutter app
This one wasn’t so obvious, either.
Go to View > Command Palette… and type
flutter. Then choose Flutter: Launch Emulator from the list. This will give you a list.
Next, pressing F5 will run the Flutter app on that device.
The status bar at the bottom tells you what device you have connected:
Clicking on the device on the status bar will pull up the option to choose a different device.
Saving the app will automatically cause a Hot Reload, and if Auto Save is enabled, everything will automatically update.
Alternatively, you can also use the run bar:
Pressing the lightning icon will give you a Hot Reload and the circular green arrow icon will give you a Hot Restart.
The default color theme in VS Code is somewhat inadequate compared to Android Studio.
You can change the color theme by going to the Command Palette and typing
color theme. There are a wide variety, but the Dark+ theme seems better to me.
From what I hear, you can also define your own color themes.
One of the great things about VS Code is how extensible it is. You already have the Flutter and Dart extensions installed, but there are many more.
I used the Flutter Pub Version Checker plugin in Android Studio to notify me of any out of date dependencies in pubspec.yaml. There isn’t anything quite like it in VS Code, but Pubspec Assist is a nice alternative. Once you have it installed, find Pubspec Assist in the Command Palette and then type the name of the dependency that you want to add or update.
Even though I’m switching to VS Code, I’m not completely abandoning Android Studio. For example, I still prefer to add the launch icons like a native developer.
I’m just starting on this migration to Visual Studio Code. I’ve gotten past the initial hurdles to building a Flutter app with it, but I’m sure there will be more to come. I’ll plan to come back and update this article as I meet them. Please leave a comment if you have some advice for me or other readers.
By the way, I’ve seen several people working on projects something akin to a Flutter IDE (see here, here, and here). These projects aren’t official or finished, but I won’t be too surprised if I find myself writing another article some day on how to use Flutter Studio.