Search code examples
flutterdartwebviewwkwebview

How to add TradingView charts to Flutter app?

I am currently working on an app that displays crypto currency details. So, I somehow need to display candlestick charts of coins against USDT. I already tried a major of libraries provided by flutter community but none of them was suitable for me. So I though that the best way to do this is displaying trading view charts in my personal app. However, ı couldn't figure out how to do it.

I found a library that displays web content: webview_flutter: ^3.0.4

And ı found that TradingView provides charts for web: TradingView Chart Widget

However, I couldn't manage to combine those since I am not that experienced about web development.

I am currently using flutter package Interactive Chart. Since I can't update the last candlestick continuously. It seems like it's not the best solution.

Thanks for all replies. :)

After @Almis 's Answer I Emulator Screen Shot

It seems like something happens, but not in the supposed way. Anyway to fix this ?

Solution

  • The website provides the embedded code that you can load to your webview.

    // Get the embedded code from website
String embeddedCode = '...';

WebView(
    initialUrl: '',
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController controller) async {
        controller.loadUrl(Uri.dataFromString(
            embeddedCode,
            mimeType: 'text/html',
            encoding: Encoding.getByName('utf-8')).toString());
    },
)