The background color before display. about flutter_echarts

[blackredscarf]

@entronad
OK. My temporary solution is to use Opacity to make Echarts invisiable, and waiting a tick when Echarts starts to render, after that making Echarts visiable.

Opacity(
  opacity: opacity,
  child: Container(
	child: Echarts(
	  key: chartKey,
	  onMessage: (emsg) {
		if(emsg == 'rendered') {
		  if(opacity == 0) {  // wait the render of chart
			Future.delayed(Duration(milliseconds: 50), () {
			  opacity = 1;
                          setState({});
			  // or bloc.add();
			});
		  }
		}
	  },
	  extraScript: '''
		  chart.on('rendered', () => {
			Messager.postMessage('rendered');
		  });
		''',

[entronad]

This is caused by the forced white background of webview in webview_flutter plugin. Now we don't have any workaround to avoid the white blink before the chart is loaded. Many people are following this issue of webview_flutter: flutter/flutter#29300
We hope this will be fixed soon.

这是由于 webview_flutter 强制 webview 的背景颜色为白色（而不是透明），
目前没有好的办法解决因此导致的加载完成前一瞬间的白色，很多人也在跟进 webview_flutter 的这个问题：flutter/flutter#29300
希望在下个版本中会改进

[entronad]

@blackredscarf
Dose this work on iOS?
We have thought about this way, but according to my experiment and this user's case: #18 (comment) , echarts dosen't work well in Opacity.

[blackredscarf]

@entronad
I only test it on Android now. I will have a try on iOS in a few months later.

[hakaari]

Wrapping chart with opacity doesn't work for me on iOS. A workaround I found until flutter/plugins#3431 is merged is to use stack & cover the chart until is starts to render.

    Stack(
      children: [
        Echarts(
          option: data,
          onMessage: (message) {
            if (opacity == 1) {
              setState(() {
                opacity = 0.0;
              });
            }
          },
          extraScript: '''
  chart.on('rendered', function () {
    Messager.postMessage('chart rendered');
  });
''',
        ),
        Opacity(
          opacity: opacity,
          child: Container(
            color: Colors.black,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
          ),
        )
      ],
    );

[volgin]

You don't need opacity. Simply show a Container on top of a chart with an "if" statement. For example,

bool _hideChart = true;
static const String _extraScript = '''
  chart.on('rendered', function () {
    Messager.postMessage('chart rendered');
  });
''';
...
return Stack(
        children: [
          Echarts(
            option: _dataString,
            extraScript: _hideChart ? _extraScript : null,
            onMessage: (message) {
              if (mounted && _hideChart) {
                setState(() {
                  _hideChart = false;
                });
              }
            },
          ),
          if (_hideChart)
            Container(
              color: Colors.black,
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
            ),
        ],
      );

This way you don't render an unnecessary widget with every refresh of a chart.