Dart-code: Flutter UI Guides preview feedback

[DanTup]

For info on the Flutter UI Guides preview, see the v3.31 release notes. This thread is for collecting feedback on the guides (including the customTracking setting).

[digitalhurricane-io]

I have both dart.previewFlutterUiGuides and dart.previewFlutterUiGuidesCustomTracking enabled.

I've restarted vscode.

When I write new code, the guidelines appear.

But they don't appear on code that I've already written.

Edit: Seems to not appear only on some code I've already written.

Is that expected behavior?

[DanTup]

@digitalhurricane-io it's not expected behaviour :( Do you have any syntax errors in the file/code that isn't working? Would you mind opening a new issue specifically for this, and include screenshots of the code that's not working? Thanks!

[digitalhurricane-io]

I'm nesting widgets inside a ternary operator on the offending code. Perhaps this is why?

Edit: I've opened an issue with a screenshot of the code here https://github.com/Dart-Code/Dart-Code/issues/1771

[windwp]

UI guides do not work inside the builder.

[marcoms]

Guide formatting breaks when using tabs for indentation

[DanTup]

@marcoms good catch - I opened https://github.com/Dart-Code/Dart-Code/issues/1791 specifically for that and will fix for vNext.

[jckpn]

Only works in some files for me... not sure why or what I'm doing wrong.

Here it works great:

Here it doesn't seem to work (at least not how I would expect):

(Both are files I wrote before enabling the UI guides)

This is such a great idea in theory though, will make writing code in Flutter so much nicer.

[DanTup]

@jckpn the second screenshot uses builders, which didn't support these. I believe that's been improved in a later SDK, but hasn't made the Flutter stable channel yet. Hopefully it'll just start working when it does :-)

[a-eid]

not sure why it looks like that for me..

[a-eid]

could be the custom line height I think..

[DanTup]

@a-eid what is your line-height set to? Custom line heights will cause gaps (see https://github.com/Dart-Code/Dart-Code/issues/1902) but it shouldn't have such large spaces unless you've set your line height really high.

[emme1444]

Italic multiline comments causes the guidelines within the comment to also tilt.
See screenshot:

[DanTup]

@emme1444 looks like that's been filed at https://github.com/Dart-Code/Dart-Code/issues/2239 - thanks!

[DanTup]

Thanks for all the feedback. I don't think there's much more to collect from this issue so I'll close it. The UI guides feature remains behind a preview flag because it's method of rendering is not too reliable but there are currently no other available APIs.

If VS Code gets a better API for this in the future (https://github.com/microsoft/vscode/issues/73780), we can move them over and hopefully have something good enough to ship on-by-default.