There are three things I would like to cover in this article:

WebView (To display TradingView Charts)

Watchlist UI

Stock Search

The WebView

Starting off with the WebView, I used the WebViewScaffold Widget to load the URL for a stock when it is pressed. TradingView provides live stock market data for almost all stock excanges in the world. I’m concerned with the NSE India.

Before jumping to the Watchlist let me tell you that I got the stock details for this app from the NSE website => Converted it to JSON => Used it in my app as an asset.

Lets edit the pubspec.yaml!

Add stocks.json as an asset and place it in the assets folder.

assets:

- assets/stocks.json

While we’re here lets get our dependencies.

dependencies:

flutter:

sdk: flutter

cupertino_icons: ^0.1.2

flutter_webview_plugin:

path_provider:

sqflite:

Plugins

Sqflite for storing data locally

flutter_webview_plugin for the WebView

Now lets create a PODO for our stock object.

Found this great website to parse json to any language. https://app.quicktype.io/

Implementing the Search

I will be using a SearchDelegate which is an inbuilt class that lets us implement searching quiet easily.

And we can call this search delegate on press of a button.

child: FloatingActionButton(

child: Icon(Icons.add),

onPressed: () {

showSearch(

context: context,

delegate: DataSearch()

);

},

backgroundColor: Colors.red,

),

LoadStocks method for SearchDelegate. Loads the stocks.json from the assets folder and return a List of Stock objects.

Future<String> loadStockAsset() async {

return await rootBundle.loadString('assets/stocks.json');

} Future<List<Stock>> loadStocks() async {

String jsonString = await loadStockAsset();

final jsonResponse = json.decode(jsonString);

StockBundle s = StockBundle.fromJson(jsonResponse);

return s.stocks;

}

The app can store a Watchlist for the user, view technical analysis charts from TradingView and query through the NSE stock list to search stock names.

Watchlist UI

I’m using a ListViewBuilder inside a FutureBuilder to load the stock list.

The Beautiful header of the app is made using a Stack of widgets.

Looks like we’re done here.

Planning to add more features like live stock data on the Stock List screen. Have any suggestions? Should’ve done something differently? Comment down below. Do clap (You can do that upto 50 times) if you liked my work. Will motivate me to make more. Follow me on Github.

Big thanks to Pawan Kumar.

The complete code for this app can be found on my Github Repo

Connect with me on LinkedIn

Get Latest Tweets from Flutter Community