I have implemented trading view advance charts HTML in flutter dart app, but i am not able to zoom in/out like as web-app. https://in.tradingview.com/widget/advanced-chart/
This is my TradingView Widget which using in screen, when user try to zoom and zoom out, it doesn't work. I have used Interactive View to make this work, but html page components doesn't zoom
class TradingViewWidgetHtml extends StatefulWidget {
const TradingViewWidgetHtml({
required this.coinNameWithUsdt,
super.key,
});
final String coinNameWithUsdt;
@override
State<TradingViewWidgetHtml> createState() => _TradingViewWidgetHtmlState();
}
class _TradingViewWidgetHtmlState extends State<TradingViewWidgetHtml> {
late final WebViewController controller;
@override
void initState() {
super.initState();
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setBackgroundColor(const Color(0x00000000))
..setNavigationDelegate(
NavigationDelegate(
onProgress: (int progress) {
debugPrint('progress');
},
onPageStarted: (String url) {
debugPrint('started');
},
onPageFinished: (String url) {
debugPrint('finished');
},
),
)
..enableZoom(true)
..loadHtmlString(CryptoNameDataSource.cryptoNameAndSource(widget.coinNameWithUsdt));
}
@override
Widget build(BuildContext context) {
return InteractiveViewer(
minScale: 1,
child: WebViewWidget(controller: controller));
}
}
class CryptoNameDataSource {
static String _binanceCoinSource(String coinWithUSDT) {
return 'BINANCE:${coinWithUSDT}';
}
static String cryptoNameAndSource(String coinSymbolWithUsdt) {
String name = _binanceCoinSource(coinSymbolWithUsdt);
return '''
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container" style="height:100%;width:100%">
<div class="tradingview-widget-container__widget" style="height:calc(100% - 32px);width:100%"></div>
<div class="tradingview-widget-copyright"><a href="https://in.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
{
"autosize": true,
"symbol": "$name",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "in",
"enable_publishing": false,
"allow_symbol_change": true,
"calendar": false,
"popup_width": "1000",
"popup_height": "250",
"range": "1M",
"support_host": "https://www.tradingview.com"
}
</script>
</div>
<!-- TradingView Widget END -->
''';
}
}