Stocks Watchlist App built on Flutter
I’ve been meaning to build my first flutter app for months now and here it is. I got really excited about Flutter after watching Flutter Interract and started learning.
Another one of my interests is the Stock Market and being an investor I have to track the stocks I’m currently invested in. Sure there are other apps to do so but why not do it myself and have some fun?
What we’re building!
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.jsonWhile 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.
