How to customize TradingView.widget in Flutter InAppWebView? - flutter

Question

I want to customize my TradingView chart widget which is in a InAppWebView widget. I can display the chart, However, I want to change background color, font and the price scrollbar's type of the chart widget. How can I do this? is there any documentation? I searched a lot in stackoverflow but any of the recommendations was not working. I want to make the chart something similar to binance's chart.
Thanks for all replies! :)
String _testCode() {
return """
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "AAPL",
"interval": "D",
"timezone": "exchange",
"theme": "dark",
"style": "1",
"toolbar_bg": "#ff7518", <!-- Does Not Work-->
"hide_side_toolbar": false,
"allow_symbol_change": true,
"save_image": false,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"locale": "en",
"overrides": { <!-- Does Not Work-->
"paneProperties.background": "#ffffff",
},
}
);
</script>
</div>
<!-- TradingView Widget END -->
""";
}
#override
Widget build(BuildContext context) {
return InAppWebView(
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
transparentBackground: true,
javaScriptEnabled: true,
),
ios: IOSInAppWebViewOptions(
disallowOverScroll: true,
),
),
onWebViewCreated: (InAppWebViewController controller) async {
controller.loadUrl(
urlRequest: URLRequest(
url: Uri.dataFromString(
//_generateCode(binanceSymbol),
_testCode(),
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8'),
),
),
);
},
);
}

Answer 1

try
String _testCode() {
return """
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget({
"autosize": true,
"symbol": "AAPL",
"interval": "D",
"timezone": "exchange",
"theme": "dark",
"style": "1",
"toolbar_bg": "#ff7518",
"hide_side_toolbar": false,
"allow_symbol_change": true,
"save_image": false,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"locale": "en",
"overrides": {
"paneProperties.background": "#ffffff",
}
});
</script>
</div>
<!-- TradingView Widget END -->
""";
}