Flutter only
Getting a bit familiar with Flutter Development in Visual Studio Code.
Flutter Standard App
The purpose of this section is to get familiar with Flutter and how to work with it in Visual Studio Code. The Flutter Default App is a small app that consists of only one file (main.dart). This app can be generated quickly, allowing you to practice how to launch the app on different target platforms using Visual Studio.
Create the Flutter Standard App in your Terminal App
flutter create <flutter_project_name>
Executing this command will generate a new folder in the current directory that includes all necessary files and subfolders for a Flutter project. The default application is a Counter App, featuring a screen with a number that can be incremented by tapping on a Floating Action Button.
Flutter Default App
Open the app in Visual Studio code
a) Switch into the subfolder flutter_project_name
cd <flutter_project_name>
b) Open VS Code by
code .
On Windows, the command
code .should work out of the box.If not working on Mac, you need to install the 'code' command once: Open up VS Code, go to View -> Command Palette (or use the shortcut, see Keyboard Shortcuts below), type 'shell' and search for Shell Command: Install 'code' command in PATH. Click on it and it will install in seconds.
Launch the App in different ways
Once Visual Studio Code is open you can launch the app in different ways.
a) By using flutter run command:
Open the Terminal in VS Code (see Shortcut below) and type in flutter run. If there are several targets, the execution is paused and you need to select the target:
Launching app by flutter run
b) By selecting the Target Platform first, and then by using one of several starting options (ensure that the main.dart file is open):
Current Target Platform - click to select another one
Start and/or select a Target Platform
Launch Options
Control Panel
When you launch the app using this method, any code changes you make will trigger a hot reload automatically. If you were to use "flutter run", you would need to manually press the "r" key to initiate a hot reload of the app.
Keyboard Shortcuts (Visual Studio Code)
I find these ones especially practical in my daily use of VS Code to boost my productivity:
| Function | Windows | Mac | Usage |
|---|---|---|---|
| Open Files quickly | Ctrl + P | Command + P | Use the shortcut and start typing the name of the file... |
| Toggle left Sidebar | Ctrl + B | Command + B | |
| Toggle Terminal | Ctrl + J | Command + J | |
| Multi-Select Cursor | Ctrl + D | Command + D | When you need to change all occurences of a function or tag in a file, select one. Then use the short cut to select all and make your changes. |
| Copy Line | Shift + Alt + Up Shift + Alt + Down |
Option + Shift + Up Option + Shift + Down | Click in one line and use the shortcut. |
| Open Command Palette | Ctrl + Shift + P | Command + Shift + P | Use the shortcut and start typing the command... |
Flutter Tutorial For Beginners In 1 Hour
When I first started exploring Flutter, I found this video to be particularly valuable. In addition to learning about the interplay of widgets and arguments, the tips on practical handling in VS Code were also very helpful to me.
👉 Flutter Tutorial For Beginners In 1 Hour
Codelab from Google
As the creator of Flutter and Dart, Google has some excellent resources to make it easy for beginners to get started with Flutter. Here is a codelab that guides developers through the steps, which they can follow in their IDE. Simply click on the button Start codelab.