TadingView Charts in Flutter Dart are responsive on App

23 views Asked by At

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 -->
  
      ''';
  }
}

0

There are 0 answers