Skip to main content

How to use Visual Studio Code for Flutter - 2023


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

To install vscode go to 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.

    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit:
    "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": [
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)


Popular posts from this blog

On asking good questions as a software developer for beginners

 As a programmer, there are times that you encounter bugs that are either too difficult to track down or fix. At times like that, you look for help somewhere. This can be in stackoverflow or developer groups on discord, slack or anywhere else. How do you phrase your question in order for others to understand the problem and help you resolve it? This is going to be a general technique in question asking that will give you quality answers or at least get the right people to point you in the right direction. Elements of a good question The following are in my opinion what makes a good question What are you trying to do What is the expected output What programming language or tools you are using What have you tried What errors did you receive if any (with stack trace) Minimal code to assist reproduce or debug (Well formatted or via a code snippet site) Helpful screenshot of UI if it's about a UI issue (eg trying to replicate