Dart-code: Show Flutter colour previews in the editor

[DanTup]

Splitting colours from https://github.com/Dart-Code/Dart-Code/issues/807, as they may not be done in the same version.

[maks]

For me it would be enough to support just making the background colour of the value be the colour of the value the way https://github.com/DeMoorJasper/vscode-pigments does, though I guess once you have the colour value its not much harder to put it into the gutter?

[DanTup]

Actually, putting an arbitrary colour in the gutter is sort-of complicated - we can only render images :) I think I have some ideas around that though.

The biggest question is similar to the Icon one - which is how do we get the colours (eg. hex codes) from source that contains something like Colors.Blue.

[DanTup]

Got this working... I didn't like the colours in the editor as mentioned above, as the text was then hard to read (or we had to dynamically figure out what colour would work for the foreground). I think this was is also more consistent with how IntelliJ renders them.

We couldn't get this info from the outline, so it's basically regex over the document for now. It'll debounce it for 1second on any changes to avoid updating too frequently. It'll be behind a preview flag in the first release to get some feedback.

[DanTup]

There's a preview build with this functionality here if you want to try it out:

https://github.com/Dart-Code/Dart-Code/releases/tag/v3.6.0-alpha.2

You'll need to enable dart.previewFlutterGutterIcons for them to show up (and Reload Window). More info on installing from vsix is here: https://dartcode.org/docs/installing-a-preview-release/

[maks]

:+1: works great for me with Colors consts and Color(num) too!
I'm guessing it's only able to deal with Colors class consts? as MyCustomColors.blue doesnt get picked up.

[DanTup]

Yeah, unfortunately it only works with colours we know are static. Your blue field would be a getter that returns a different color each time it is called, and we have no runtime - we have to show colours based on the literal code we have available.

[maks]

Oh! So they only need to be statics? Because mine is actually eg:

import 'dart:ui';

abstract class MyCustomColors {
  static const darkGray = Color(0xFF646464);
  ...

[DanTup]

Sorry, I didn't describe that well. By "static" I just meant, we can figure it out from the literal text that's in the editor. We store a lookup for all the common Flutter colors (Color.pinkAccent, Color.red[400] etc.) and the ones that are hex values we can translate.

In theory we could do a "go to definition" on your custom colour and then try to read it from there, but I think it would be expensive (we need to do a whole document at a time) and starts to get messy. If we were to do that, it would definitely make more sense to push into the analysis server in the SDK.

[maks]

Completely agree! I'm more than happy to do the "go to definition" myself for in these cases, just having colour preview for Color class literals is enough for me, thanks again for all your work on the plugin!!

[DanTup]

I'm more than happy to do the "go to definition" myself for in these cases

Ok, so in that case if you Go to Definition, you should see the colour in the gutter in the definition for the custom colour class you posted above. If that doesn't work, let me know and I can do some tweaking.

(You'll need to use the preview build above or what for the next release to test it, ofc)

[maks]

Sorry I should have added, going to the definition does display the gutter colours perfectly for each colour const.