Getting a bit familiar with Flutter Development in Visual Studio Code.
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.
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.
a) Switch into the subfolder flutter_project_name
b) Open VS Code by
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.
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:
b) By selecting the Target Platform first, and then by using one of several starting options (ensure that the main.dart file is open):
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.
I find these ones especially practical in my daily use of VS Code to boost my productivity:
|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...|
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.
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.