Flutter sample

[zhangyu0218]

Is there an tradingview example of flutter?

[kirchet]

No, we don't have such example

[timocov]

Feel free to make a PR with such example!

[buckcao]

can you support flutter? flutter is fashion

[Pascaltallarida]

Hello, we will work on it using Flutter, have you finally worked on it?

[timocov]

have you finally worked on it?

No.

[TinkerBuild]

hi can u do it in flutter?

[makedonsky94]

Unfortunately, current state of WebView in Flutter is not acceptable. The widget still needs a lot of improvements.
At the moment you can use combination of native code and Flutter. Check this link out

[alinetskyi]

Hey, anybody has any news regarding this ?

[muzairk92]

Is there a tradingview example of flutter?

[kkapuria3]

https://pub.dev/packages/trading_chart

Is this worthwhile looking into ?

[teneon]

Since Flutter 2.0, web channel is now out of beta. I would also be very interested in Flutter example with Tradingview.

[ducthong97]

I agree, please support Flutter, Flutter is growing super fast.

[thicow]

Hi guys! Sorry for restarting this thread but I managed to run tv charting_library using flutter_inappwebview and follow this sample. It is running default and basic sample tv charting library.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
class TradindView extends StatefulWidget {
@OverRide
_TradindViewState createState() => _TradindViewState();
}
final InAppLocalhostServer localhostServer = new InAppLocalhostServer();
class _TradindViewState extends State {
@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('InAppLocalhostServer Example'),
),
body: Container(
child: Column(children: [
Expanded(
child: InAppWebView(
initialUrlRequest: URLRequest(
url: Uri.parse("http://localhost:8080/assets/index.html")),
onWebViewCreated: (controller) {},
onLoadStart: (controller, url) {},
onLoadStop: (controller, url) {},
),
)
])),
);
}
}

my pubspec.yalm:

assets:
- assets/index.html
- assets/charting_library/
- assets/datafeeds/
- assets/charting_library/bundles/
- assets/datafeeds/udf/dist/bundle.js
- assets/datafeeds/udf/dist/polyfills.js

[alexanderytaylor]

@thicow could you please go into more detail about this? I'm trying to implement something similar

[thicow]

@thicow could you please go into more detail about this? I'm trying to implement something similar

Hi @alexanderytaylor !
I implemented exactly it. Using flutter_inappwebview I created a widget with InAppWebView using initialUrlRequest: URLRequest(url: Uri.parse("http://localhost:8080/assets/index.html")),

I download tv-chart-library into assets folder and configure pubspec.yalm:

assets:

• assets/index.html
• assets/charting_library/
• assets/datafeeds/
• assets/charting_library/bundles/
• assets/datafeeds/udf/dist/bundle.js
• assets/datafeeds/udf/dist/polyfills.js

and it works fine! Inside my index.html I configured the datasource to render the chart.

[alexanderytaylor]

@thicow thanks for the reply! Does setting the initialUrlRequest to localhost work when the site is live as well or just for debugging?

[thicow]

@thicow thanks for the reply! Does setting the initialUrlRequest to localhost work when the site is live as well or just for debugging?

Localhost everytime! Localhost because index.html works like a angular app (SPA)... I don't need open a remote website in initialUrlRequest.
But the most important is setting the urldatafeed to production datafeed in file index.html (https://github.com/tradingview/charting_library/blob/master/index.html) on line

datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),

[VishalS01]

Hi @timocov, @kirchet , is there any update on this issue? Any PoC, sample projects, dummy code etc. that your team can provide will be much appreciated. Please update.

[coditori]

Hi guys is there any update?

[caglarylmz]

if need works with flutter_inappwebview .

1. add flutter_inappwebview: ^5.3.2
2. Create index.hstm and td.js files in assets folder. And define its, under to assets
   index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <title>Document</title>
</head>
<body>
<div class="tradingview-widget-container">
    <div id="tradingview_17f8f"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
</div>

<script type="text/javascript" src="./td.js"></script>
</body>
</html>

td.js

  new TradingView.widget(
  {
  "width": 350,
  "height": 480,
  "symbol": "NASDAQ:AAPL",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "dark",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "allow_symbol_change": false,
  "container_id": "tradingview_17f8f"
}
  );

3 main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await localhostServer.start();
  if (Platform.isAndroid) {
    await AndroidInAppWebViewController.setWebContentsDebuggingEnabled(true);
    var swAvailable = await AndroidWebViewFeature.isFeatureSupported(
        AndroidWebViewFeature.SERVICE_WORKER_BASIC_USAGE);
    var swInterceptAvailable = await AndroidWebViewFeature.isFeatureSupported(
        AndroidWebViewFeature.SERVICE_WORKER_SHOULD_INTERCEPT_REQUEST);
    if (swAvailable && swInterceptAvailable) {
      AndroidServiceWorkerController serviceWorkerController =
          AndroidServiceWorkerController.instance();

      serviceWorkerController.serviceWorkerClient = AndroidServiceWorkerClient(
        shouldInterceptRequest: (request) async {
          print(request);
          return null;
        },
      );
    }
  }
runApp(const Forex());
}
```
4. 
```
class MYView extends StatefulWidget {
  const MYView ({Key? key}) : super(key: key);

  @override
  State<MYView > createState() => _MyViewState();
}

class _MyViewState extends State<MYView > {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SizedBox(
          width: Get.width,
          height: Get.height,
          child: InAppWebView(
            initialUrlRequest: URLRequest(
                url: Uri.parse("http://localhost:8080/assets/web/index.html")),
            androidOnPermissionRequest: (controller, origin, resources) async {
              return PermissionRequestResponse(
                  resources: resources,
                  action: PermissionRequestResponseAction.GRANT);
            },
            onWebViewCreated: (controller) {},
            onLoadStart: (controller, url) {},
            onLoadStop: (controller, url) {},
          ),
        ),
      ),
    );
  }
}
```
and works

[segungreat]

await localhostServer.start();

could not resolve reference

[segungreat]

await localhostServer.start();

could not resolve reference

Solved, Thanks

[DasunInduwara]

i'm trying to add some data to TradingView chart. but i's not working,

` late InAppWebViewController _webViewController;

@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TradingView Chart'),
),
body: InAppWebView(
initialUrlRequest: URLRequest(
url: Uri.parse('http://localhost:8080/assets/web/index.html'),
),
onWebViewCreated: (InAppWebViewController controller) {
_webViewController = controller;
},
onLoadStop: (controller, url) async {
// Wait for the TradingView widget to load
await Future.delayed(Duration(seconds: 2));

      // Check if the TradingView widget is displayed correctly
      bool isWidgetDisplayed =
          await _webViewController.evaluateJavascript(source: '''
        // Check if the TradingView widget is displayed
        var widgetContainer = document.querySelector('.tradingview-widget-container');
        var isWidgetDisplayed = widgetContainer && widgetContainer.offsetWidth > 0 && widgetContainer.offsetHeight > 0;
        isWidgetDisplayed;
      ''');

      if (isWidgetDisplayed) {
        print('TradingView widget loaded successfully');
        _loadTradingViewChart();
      } else {
        print('Error: TradingView widget did not load');
      }
    },
  ),
);

}`

    void _loadTradingViewChart() {
    List<Map<String, dynamic>> data = [
      {
        "time": 1648041600000,
        "open": 58353.11,
        "high": 58727.53,
        "low": 56566.16,
        "close": 56954.84
      },
      {
        "time": 1647955200000,
        "open": 58154.92,
        "high": 59129.91,
        "low": 57601.37,
        "close": 58353.11
      },
      {
        "time": 1647868800000,
        "open": 56032.22,
        "high": 58713.57,
        "low": 55253.87,
        "close": 58154.92
      },
      {
        "time": 1647782400000,
        "open": 57517.58,
        "high": 57569.16,
        "low": 54754.38,
        "close": 56032.22
      },
      {
        "time": 1647696000000,
        "open": 56853.84,
        "high": 58082.69,
        "low": 55822.07,
        "close": 57517.58
      },
    ];

    String jsonData = jsonEncode(data);

    String js = '''
    new TradingView.widget({
      "width": 350,
      "height": 480,
      "symbol": "BTC/USDT",
      "interval": "D",
      "timezone": "Etc/UTC",
      "theme": "light",
      "style": "2",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "enable_publishing": false,
      "allow_symbol_change": false,
      "datafeed": {
        "data": ${jsonData},
        "datafeed": new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com")
      },
      "container_id": "tradingview_17f8f",
      "overrides": {
        "mainSeriesProperties.style": 1,
        "paneProperties.background": "#ffffff",
        "paneProperties.vertGridProperties.color": "#e1e1e1",
        "paneProperties.horzGridProperties.color": "#e1e1e1",
        "symbolWatermarkProperties.transparency": 90,
        "scalesProperties.textColor" : "#AAA",
        "scalesProperties.backgroundColor" : "#FFF",
        "scalesProperties.lineColor" : "#D4D4D4",
        "scalesProperties.priceLabelsColor" : "#787B86"
      },
      "studies_overrides" : {
        "volume.volume.color.0" : "#6fba44",
        "volume.volume.color.1" : "#f25866",
        "volume.volume.transparency" : 70,
        "volume.show ma" : false,
        "bollinger bands.median.color" : "#33FF88",
        "bollinger bands.upper.linewidth" : 7
      },
      "loading_screen": { 
        "backgroundColor": "#FFFFFF", 
        "foregroundColor": "#000000"
      }
    });
  ''';

    _webViewController.evaluateJavascript(source: js).whenComplete(() {
      print("Complete");
    }).onError((error, stackTrace) {
      print("print $e");
    });
  }
}

this is working without this,

      "datafeed": {
        "data": ${jsonData},
        "datafeed": new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com")
      },

but i need to add my data list to chart
@caglarylmz Plz Help me

[tapas-tw]

Any update on flutter support?

[doanngoctu95]

any update here?

[Floul]

Any Update?

[ghost]

Any update?

[Bitsy-Chuck]

Any update?

[sthakrishnakumar]

Is there any update regarding the flutter implementation?

[steverogers180]

i'm trying to add some data to TradingView chart. but i's not working,

` late InAppWebViewController _webViewController;

@OverRide Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('TradingView Chart'), ), body: InAppWebView( initialUrlRequest: URLRequest( url: Uri.parse('http://localhost:8080/assets/web/index.html'), ), onWebViewCreated: (InAppWebViewController controller) { _webViewController = controller; }, onLoadStop: (controller, url) async { // Wait for the TradingView widget to load await Future.delayed(Duration(seconds: 2));

      // Check if the TradingView widget is displayed correctly
      bool isWidgetDisplayed =
          await _webViewController.evaluateJavascript(source: '''
        // Check if the TradingView widget is displayed
        var widgetContainer = document.querySelector('.tradingview-widget-container');
        var isWidgetDisplayed = widgetContainer && widgetContainer.offsetWidth > 0 && widgetContainer.offsetHeight > 0;
        isWidgetDisplayed;
      ''');

      if (isWidgetDisplayed) {
        print('TradingView widget loaded successfully');
        _loadTradingViewChart();
      } else {
        print('Error: TradingView widget did not load');
      }
    },
  ),
);

}`

    void _loadTradingViewChart() {
    List<Map<String, dynamic>> data = [
      {
        "time": 1648041600000,
        "open": 58353.11,
        "high": 58727.53,
        "low": 56566.16,
        "close": 56954.84
      },
      {
        "time": 1647955200000,
        "open": 58154.92,
        "high": 59129.91,
        "low": 57601.37,
        "close": 58353.11
      },
      {
        "time": 1647868800000,
        "open": 56032.22,
        "high": 58713.57,
        "low": 55253.87,
        "close": 58154.92
      },
      {
        "time": 1647782400000,
        "open": 57517.58,
        "high": 57569.16,
        "low": 54754.38,
        "close": 56032.22
      },
      {
        "time": 1647696000000,
        "open": 56853.84,
        "high": 58082.69,
        "low": 55822.07,
        "close": 57517.58
      },
    ];

    String jsonData = jsonEncode(data);

    String js = '''
    new TradingView.widget({
      "width": 350,
      "height": 480,
      "symbol": "BTC/USDT",
      "interval": "D",
      "timezone": "Etc/UTC",
      "theme": "light",
      "style": "2",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "enable_publishing": false,
      "allow_symbol_change": false,
      "datafeed": {
        "data": ${jsonData},
        "datafeed": new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com")
      },
      "container_id": "tradingview_17f8f",
      "overrides": {
        "mainSeriesProperties.style": 1,
        "paneProperties.background": "#ffffff",
        "paneProperties.vertGridProperties.color": "#e1e1e1",
        "paneProperties.horzGridProperties.color": "#e1e1e1",
        "symbolWatermarkProperties.transparency": 90,
        "scalesProperties.textColor" : "#AAA",
        "scalesProperties.backgroundColor" : "#FFF",
        "scalesProperties.lineColor" : "#D4D4D4",
        "scalesProperties.priceLabelsColor" : "#787B86"
      },
      "studies_overrides" : {
        "volume.volume.color.0" : "#6fba44",
        "volume.volume.color.1" : "#f25866",
        "volume.volume.transparency" : 70,
        "volume.show ma" : false,
        "bollinger bands.median.color" : "#33FF88",
        "bollinger bands.upper.linewidth" : 7
      },
      "loading_screen": { 
        "backgroundColor": "#FFFFFF", 
        "foregroundColor": "#000000"
      }
    });
  ''';

    _webViewController.evaluateJavascript(source: js).whenComplete(() {
      print("Complete");
    }).onError((error, stackTrace) {
      print("print $e");
    });
  }
}

this is working without this,

      "datafeed": {
        "data": ${jsonData},
        "datafeed": new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com")
      },

but i need to add my data list to chart @caglarylmz Plz Help me

To use your own data in chart, you have to provide a backend endpoint which should provide data in format which is required by Tradingview. See Here: https://www.tradingview.com/charting-library-docs/latest/tutorials/implement_datafeed_tutorial/Datafeed-Implementation/