I'm getting started with flutter and trying build a Stateful Widget, which when called would display a d3.js chart. My thinking is to build a chart into a stateful widget and use the changenotifier provider to update the chart data, and d3.js has beautiful plots.

I've found a couple of other references of other people doing similar things...

Dart js interop with D3

How to embed a D3 chart in a Polymer.dart element?.

It seems to make sense that if I already had an element in my html code that I could reference from my dart code I could attach to that, and create my plot - as in the latter reference...

import 'dart:js' as js;
js.context['d3'].callMethod('select', [shadowRoot.querySelector('.chart')]);

What I don't understand, is how I would be able to create that .chart element in the DOM within my stateful widget itself so that from the perspective of my dart code, it sees it as just a dart widget.

Put another way, what is it than I can select that is local to the widget itself so that I can nest the resulting widget in other widgets?

Is wanting to wrap the d3.js in a stateful widget in dart something that could be acplished in a relatively encapsulated way? And is trying to create the html within the widget itself a good approach?

I'm getting started with flutter and trying build a Stateful Widget, which when called would display a d3.js chart. My thinking is to build a chart into a stateful widget and use the changenotifier provider to update the chart data, and d3.js has beautiful plots.

I've found a couple of other references of other people doing similar things...

Dart js interop with D3

How to embed a D3 chart in a Polymer.dart element?.

It seems to make sense that if I already had an element in my html code that I could reference from my dart code I could attach to that, and create my plot - as in the latter reference...

import 'dart:js' as js;
js.context['d3'].callMethod('select', [shadowRoot.querySelector('.chart')]);

What I don't understand, is how I would be able to create that .chart element in the DOM within my stateful widget itself so that from the perspective of my dart code, it sees it as just a dart widget.

Put another way, what is it than I can select that is local to the widget itself so that I can nest the resulting widget in other widgets?

Is wanting to wrap the d3.js in a stateful widget in dart something that could be acplished in a relatively encapsulated way? And is trying to create the html within the widget itself a good approach?

• javascript
• flutter
• d3.js
• dom
• dart

• 1 Hey Flaminator, could you find any solution? – Abbas Jafari Commented Nov 7, 2020 at 11:44
• Unfortunately no I didn't. I ended up using vue.js instead of flutter for the project as a result. – Flaminator Commented Nov 29, 2020 at 23:50

2 Answers 2

I guess the best you could do is to use flutter_webview_plugin and run javascript code (for example, draw d3.js chart) inside this webview.

https://pub.dev/packages/plotly_js was web patible only when posting. An actual port would be nice.