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

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:

Launch app

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

Current Target Platform - click to select another one

Select Target platform

Start and/or select a Target Platform

Launch options

Launch Options

Control Panel

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:

Open Files quicklyCtrl + P Command + PUse the shortcut and start typing the name of the file...
Toggle left SidebarCtrl + B Command + B
Toggle TerminalCtrl + J Command + J
Multi-Select CursorCtrl + D Command + DWhen 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 LineShift + Alt + Up
Shift + Alt + Down
Option + Shift + Up
Option + Shift + Down
Click in one line and use the shortcut.
Open Command PaletteCtrl + Shift + P Command + Shift + PUse 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.

πŸ‘‰ Β  A Codelab to write your first app