DevTools on Flutter for Web

We're rewriting DevTools to run on Flutter for Web.

This section of our wiki is intended for sharing things we learn as we build out the Flutter version of the DevTools app.

Please add whatever information you believe is useful to each section, and include new questions or comments freely.

General

To set up flutter web development: https://flutter.dev/docs/get-started/web.

Docs on Flutter for Web: https://master-api.flutter.dev/. This is different from api.flutter.dev, and includes new additions that only work on web.

For issues related to DevTools on Flutter for Web, use the hummingbird label: https://github.com/flutter/devtools/labels/hummingbird.

Timeline view

package:charts_flutter provides chart rendering for Flutter.

We may need to do something special to handle the mouse wheel zoom. We may also run into limits on its ability to handle large time series: DevTools collects very granular data about when an event occurs.

Debugger view

codemirror.js is an integral part of the debugger view. We need to be able to use it as a dependency or a Flutter plugin in the DevTools app.

CodeMirror

We can draw an iframe inside of HtmlElementView: https://master-api.flutter.dev/flutter/widgets/HtmlElementView-class.html

Note that this is only visible from Flutter Web. Embedding this webview in a Flutter for Desktop build is not currently possible. On mobile, it is possible with package:flutter_web_view.

Open Questions

I've listed open questions I don't have an answer to in this doc: https://docs.google.com/document/d/1MUXmjFmEJoELq02i1dNXvpoFwAUYtaY7-i843dIz_7o/edit?hl=en#