White Box if rendered in an ExpansionTile [ only on iOS ]

[akramaskar]

Hi everyone,

we are using the Echart in an item from a list builder. Each item is an ExpansionTile ( kind of an accordion widget: https://api.flutter.dev/flutter/material/ExpansionTile-class.html) and we got the problem that the chart is only rendered as a white box:

As you can see, when the chart is not in the view from the beginning (probably on initState) it's not getting rendered at all. Different if we change the behaviour of the ExpansionTile to be expanded from the beginning. In that case, only the cards which are visible in the very beginning is getting rendered:

As far as I understand, the Echart is getting rendered using a Webview is that correct? Since the webview has a controller object, a possible solution would be to rerender the chart when it's getting expanded (ontap) with something like this:

await _controller.reload();

Is there a way to access the controller or anyone here maybe got another solution for this?

Steps to reproduce:

1. Create a column
2. Put many ExpansionTile widgets so that it's filling more of the screen
3. Put the echart as a children widget
4. Set the initiallyExpanded to false
5. Render on ios

Regards

[akramaskar]

Fixed it

I created a fork which reload the chart after init

https://github.com/akramaskar/flutter_echarts

[entronad]

@akramaskar Your solution is great. I would like to merge your changes on your permission. But there is one little problem that your fork is from https://github.com/entronad/flutter_echarts/commit/4b0eef83d8e761f62b0f8856c342ce362540e476 but the HEAD of this repo is https://github.com/entronad/flutter_echarts/commit/41f6aba1d74611c55afa0c84e42cddeb2625b410 (1 commit abead), so that I can't merge. Would you please make a new fork and a new PR from the HEAD (The HEAD commit is v2.0.0 updating null-safty and Echarts 5). By this way you could be listed in the contributers.

[akramaskar]

@entronad Thank you! Yes, I had to do that since we were not using null-safety yet.

I've created a new fork and updated it there. Glad i can help :)

Edit: You need to do another pull request tho. I've deleted the old fork and created a new one. Wasn't sure what to do best since I did a hard reset

[entronad]

Please update to v2.1.0 and try setting reloadAfterInit to true.

[akzhang]

Please update to v2.1.0 and try setting reloadAfterInit to true. I have update to V2.1.0 , and setting reloadAfterInit to true, but it's still useless

[liuqun1]

all answers don't resolve my problem, I try to below way resolve my problem. onLoad: (webView) { if (Platform.isIOS && Global.isplaying == false) { Future.delayed(Duration(milliseconds: 500)).then((value) { webView.reload(); Global.isplaying = true; }); } },

[tuceturan]

@liuqun1 Global is which library I have same problem but android platrom

[entronad]

If rendering problems still bother you (most of which is caused by different platforms and difficult to avoid in Flutter), I suggest you to switch to this lib: https://github.com/entronad/graphic