How do I debug a flutter app in vscode if the launch program is nested deep inside?

Question

Problem in short

I'm trying to debug a flutter app using vscode and I get the below warning and the debugging stops due to the errors given at the end of this question. Apparently it is not able to find my dart sdk. But I have provided the sdk path in settings.

mobile_app/lib/main.dart:1: Warning: Interpreting this as package URI, 'package:mobile_app/main.dart'.

The problem is mentioned in this medium post but with no solution. You might have to translate the page to read it.

Further more clues

• This happens only when my main program is nested more than two levels deep.I have a deeply nested folder structure (given below). The main.dart file is in foo/code/ui/mobile_app/lib and the .vscode/launch.json is in foo. I've provided this path in launch.json for vscode. It works fine if I place my .vscode/launch.json in ui and open the folder ui in vscode or when I place it under mobile_app.
• This happens only in vscode. (The other IDE I tried is Android Studio)

My folder structure

- foo
  - .vscode
    # launch.json
  - code
    + domain (this is a dart lib (shared code))
    - ui
      - mobile_app
        - lib
          # main.dart
      + web_app
  + design

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": "Jamsalon Mobile App",
            "program": "code/ui/mobile_app/lib/main.dart",
            "request": "launch",
            "type": "dart"
        }
    ]
}

Complete Error

mobile_app/lib/main.dart:1: Warning: Interpreting this as package URI, 'package:mobile_app/main.dart'.

file:///C:/Users/random_user/Documents/app_development/frameworks/flutter/packages/flutter/lib/src/material/animated_icons.dart:9:8: Error: Not found: 'dart:ui'
import 'dart:ui' as ui show Paint, Path, Canvas;
       ^
file:///C:/Users/random_user/Documents/app_development/frameworks/flutter/packages/flutter/lib/src/material/animated_icons.dart:10:8: Error: Not found: 'dart:ui'
import 'dart:ui' show lerpDouble;
       ^
file:///C:/Users/random_user/Documents/app_development/frameworks/flutter/packages/flutter/lib/src/material/app.dart:5:8: Error: Not found: 'dart:ui'
import 'dart:ui' as ui;
       ^
file:///C:/Users/random_user/Documents/app_development/frameworks/flutter/packages/flutter/lib/src/material/app_bar_theme.dart:5:8: Error: Not found: 'dart:ui'
import 'dart:ui' show lerpDouble;
       ^
file:///C:/Users/random_user/Documents/app_development/frameworks/flutter/packages/flutter/lib/src/material/arc.dart:6:8: Error: Not found: 'dart:ui'
import 'dart:ui' show lerpDouble;
       ^
file:///C:/Users/random_user/Documents/app_development/frameworks/flutter/packages/flutter/lib/src/material/bottom_app_bar_theme.dart:5:8: Error: Not found: 'dart:ui'

Solution

These errors are because your project is not being detected as a Flutter project (because of the deep nesting). When a Dart project is open, the plugin has to decide whether to go into "Flutter mode" and look for a Flutter SDK (and invoke flutter commands) or "Dart mode" (looking for a standard Dart SDK and using dart and pub commands).

For performance reasons, it only scans the top two levels of folders when making this decision. If you have a Flutter project nested many levels deep, it will go into "Dart mode".

My recommendation would be to use the multi-root workspace feature of VS Code so that the Flutter project is available further up (or as a workspace folder). For example, if you click File -> Add Folder to Workspace and then browser to your mobile_app folder, that should fix it. Unfortunately this experience isn't as nice as I wish it was (you'll now see mobile_app duplicated at the top-level of your Explorer tree) because of https://github.com/Microsoft/vscode/issues/45470 (please add a 👍 to that!).