Why are the Flutter guide lines broken in VS Code

user_10692671 0
Viewed 3018

Why are the guidelines for Flutter broken up into pieces (as shown on the screenshot) in VS Code. This feature comes from the official Flutter extension for VS Code. Is there a fix for that? I have tried switching all the settings off and on, uninstalling the Flutter plugin.

enter image description here

flutter visual-studio-code
3 Answers

In VS Code, if you head to File->Preferences->Settings, search for 'previewFlutter'. That should give you the Dart: Preview Flutter Ui Guides option. Make sure to uncheck that and that should remove those lines after saving and restarting VS Code!

Edit:

Considering you want the lines but want them to be solid, heading to File->Preferences->Settings and setting Editor: Line Height to 17 makes them solid. That is the sweet spot on my editor, but it depends on your font-size (mine is 14). Make sure that Dart: Preview Ui Guides is checked!

user_115177890 
{
    "workbench.colorCustomizations": {
        "editorIndentGuide.activeBackground": "#ffffffa2",
        "editorIndentGuide.background": "#efefef70",
    },
    // most probably these are responsible
    "dart.previewFlutterUiGuides": false,
    "dart.previewFlutterUiGuidesCustomTracking": false
}

Here are some setting which you can add to your settings.json which can help you fix the issue.

user_663840

I was looking for this option, too. If I changed line hight all the code became too densed and I didn't like the way it looked.

So, finally, as I was searching for a better font for my editor I suddenly realized Fira Code solved this issue!

Just put FiraCode-Regular into Preferences -> Settings -> Editor: Font Family and you'll be good to go. I hope so.

Screenshot of solid guide lines in VSCode

user_168140060
Related