How to use Visual Studio Code for Flutter - 2023

Introduction

Visual Studio code is a customizable  editor that allows for you to tweak things the way you like it.

To install vscode go to https://code.visualstudio.com/ and following the instructions relevant to your operating system.

Install flutter and dart extensions

1.  Go to view -> command palette
2. Type install and select extensions: install extenstions
3. Type flutter in the search field and click install
   

Debugging a flutter app

 

Image 1

Running a debug app

To run your flutter app, click on the debug button (1) from the image 1 above. Click on Run and debug (2).

This will show the device list to run. If a emulator and a device is already connected, it will use that device instead.

 Creating a custom run command

There are times that you have some parameters to the flutter run command. At those times, custom launch config is the right thing to use.  Click on the debug button (1) image 1, click on create a launch.json file (3). This will create a folder called .vscode with the file launch.json.

Inside this file, you will find the configuration, you can edit as needed.

 launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "mysample",
            "request": "launch",
            "type": "dart"
        },
        {
            "name": "mysample (profile mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "profile"
        },
        {
            "name": "mysample (release mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "release"
        }
    ]
}

 For example, if we want to run flutter with verbose and a release flavor. We can add this "args":["-v"] the first config named mysample

         {
            "name": "mysample",
            "request": "launch",
            "type": "dart",
            "args": [
            	"-v",
                "--flavor",
                "release"
            ]
        },

NB: Do note that args takes an array of strings with each command and value provided separately as in the example above.

Break points

 When running an app, you might want to step through the code line by line to seen what is happening.

This can be achieved with breakpoints.

Image 3

To add a breakpoint, click on the left side right next to the line number you want it on.

Breakpoints have  different colors and styles

• A red dot indicates that the breakpoint is active,
• A gray one indicates that it is inactive.
• A red one with surrounded by yellow indicates that, the code is currently paused on that line
• A red one with two dashes indicates that the breakpoint is active break point and has a condition attached
  

Adding conditions to breakpoints

Several conditions can be added to a break point. Like if the code breaks on a line, you want to print hello world or if currentPageIndex is 2 you want the code to break on the line.

When a breakpoint is hit, you can preview all values of  variables in the code block.

There are currently try types of conditional breakpoints

• Expression - When an expression is true, the app will break on this line
• Log message - A message to print when the breakpoint is hit
• Hit count - Break when the hit condition is met

Stepping through lines

When a breakpoint is hit, you can let the debugger run one line at time to see how the code works by pressing second icon in (3)