Flutter-intellij: QUESTION: Where can I listen for Flutter layout JSON?

[searchy2]

For developing a plugin for Flutter, I would like to hook into the Flutter Outline. From my understanding, the Flutter Outline is able to render a visual representation of Dart UI code because it processes FlutterOutline objects. FlutterOutline objects are created from JSON. The JSON is generated somewhere in the Dart Language Server.

My two questions are:

1. Where does the Flutter Outline get the JSON from?
2. What is the channel/method that passes data from the Dart Analysis server to the plugin? How can I hook into the Dart Analysis server and get the raw Flutter Outline output?

Please let me know my assumptions are correct. I think if there's a way to hook into the Flutter Outline, then you can create configurators that modify widget values through dropdowns, pickers, etc.

[jacob314]

See
https://github.com/flutter/flutter-intellij/blob/ae032343054c3e06aec48819bca815eb9a5196b1/src/io/flutter/editor/ActiveEditorsOutlineService.java
For the easiest way to listen for FlutterOutline changes.

[jacob314]

The data is transferred as JSON.

[searchy2]

Thanks, this is helpful! Can you point me to how to register as a listener? If I can get the data from the Outline Service, then I can start building!

[jacob314]

https://github.com/flutter/flutter-intellij/blob/ae032343054c3e06aec48819bca815eb9a5196b1/src/io/flutter/editor/ActiveEditorsOutlineService.java#L140

[searchy2]

Thank you very much @jacob314 ! I'm going to close this issue because I think I have a good starting point for extending the Flutter Outline and adding custom functionality.

[devoncarew]

Please let me know my assumptions are correct. I think if there's a way to hook into the Flutter Outline, then you can create configurators that modify widget values through dropdowns, pickers, etc.

We are actively doing some work in this area - looking into creating property editors for common properties. The best place to follow along or ask questions about it is on discord: https://discordapp.com/channels/608014603317936148/608020249119555594.

[searchy2]

@devoncarew Is there a dedicated channel on Discord for this or a collection of the relevant conversations? Discord is not good at grouping conversations by topic and in depth discussions.

[devoncarew]

Discord is a mixed bag for sure. That channel I sent is for the Flutter DexExp (developer experience) discussion - I believe that's the best place to discuss. I'd look for 'HotUI' in that channel. There are a few documents - linked to from that channel - that have more details about the project.