Flutter Question posted in
The official Flutter documentation can be found here.

How debug flutter app from VS Code properly?

I am new on flutter. I am using vs code. Sometimes I see that the app is getting stack in a particular event or page. Then I restart debugging on same place it gets stacked again.

And then after trying many times, I just open same codebase into android studio and I run app from android studio into same emulator which one I use before with vs code. Suddenly I am seeing a red screen like following the error message, it gets easier for me to fix issues.

But question is why I cannot see that error red screen when I open the app from vs code? Instead, it just getting stacked.

If you have any idea please give me suggestions?

Red screen on emulator

On VS Code I use following indicator button for starting the app.
VS Code Screnshot

Tags:

3

Answers


  1. 0
    1. have you also installed the 2 extensions for VSCode (Dart / Flutter)?
    2. how do you start the debugging? Via F5 / green button in the debugging area or via the console?

    lG Felix

    Login or Signup to reply.
  2. 0

    I recommend you to debug you app using command

    flutter run -v

    This command give show you errors in terminal and on screen also
    to

    1. Hot reload use r
    2. Hot restart use R
    3. terminate use q
      I hope this will help you.
    Login or Signup to reply.
  3. 0

    Make sure you’re running in debug mode: Ensure you are running the app in debug mode in VS Code. This mode provides more detailed error messages.

    Check for FlutterError.onError: If your app has custom error handling that overrides Flutter’s default behavior, ensure you are not suppressing the red error screen. If you want to log errors but still display the red error screen, modify your error handler like this:

    FlutterError.onError = (FlutterErrorDetails details) {
  FlutterError.presentError(details);
  // Optionally log the error to a backend or file
};

    Enable structured errors in VS Code: You can enable structured error messages in VS Code by adding the following setting to your settings.json:

    "dart.flutterStructuredErrors": true

    This will give you more detailed error information similar to Android Studio.

    By following these steps, you should be able to see the same red error overlay on your device while running from VS Code as you do in Android Studio.

    Please tell me if you are not.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search