Creating your own lemon.markets Dashboard using Flutter

Hey there. My name is Marius, and I am part of lemon.markets, an early-stage startup from the heart of Berlin that is working on an infrastructure that lets you build your own brokerage experience at the stock market. In this blog post, I will walk you through a project developed by our community member Melanie, where we will tackle the basics of building your own mobile-optimised Trading dashboard using Flutter. Does that sound like fun to you? Then let’s not waste any more time and get going.

Community involvement was and is one of the key ingredients of lemon.markets. We are building a product for developers, therefore the only reasonable thing to do when designing such a product is to continuously ask our users for their input on specific product decisions. We are on a good way to creating an active community that is closely involved in our development process and we will continue to really listen to what our users want.

Besides getting feedback on specific API functionality, we are also trying to better understand what our users are actually building. To us, it is really fulfilling to see all the community projects that are slowly coming to life and we will always help to improve them wherever we can. A while ago, we reached out to our beta users and asked if there might be a way to collaborate and create content pieces out of their projects to inspire other (soon-to-be) users to start building. Melanie told us about her Flutter project, in which she is working on her own custom mobile dashboard that allows her to conveniently monitor her portfolio. We were immediately hooked.

Melanie was one of the first people we onboarded to lemon.markets and she has been an active contributor ever since. When the pandemic hit in early 2020, she started to develop a general interest for trading and the stock market. However, being a professional developer (by day, she is a Java software developer in the logistics area) with the corresponding mindset, she quickly realised that she would enjoy using a service that allows her to automate her tradings and provides reliable market data. Therefore, she started looking for something in Germany that offered her that flexibility. Luckily, she stumbled across lemon.markets. She immediately saw the advantages of the product we are building and quickly started developing her first project with it: her own trading dashboard, built with Flutter.

She told us that she enjoys the freedom to create a dashboard that is perfectly adapted to her needs, instead of using a (web) app that would always feel like a compromise. With lemon.markets, she can design a project just for herself and her use case.

When she is not working on advancing her dashboard (although it is hard to imagine that someone would not use every free minute with lemon.markets 😉), she enjoys spending time in her garden, where she tries to not let her planted vegetables go dry. Also, she likes to tackle additional tech/dev projects, whenever she finds the time. Being married with two young kids, that is not always easy, though (it was really fun to be in Zoom calls with Melanie right after she finished work and before her kids came home from school).

We love this project, as it perfectly captures how we think about lemon.markets. In the end, we are an API-first company, which means that we will dedicate most of our resources to building stable and convenient programming interfaces. Even though there will always be a number of visual touch points, they will always only be supplements to our API(s). Other companies are successfully providing a frontend-first experience in brokerage, but that is not our way to go: we want to silently run in the background. Our vision is that, in a few years, a large majority of European citizens will regularly buy stocks at the stock market through different providers without realising that these providers are “powered by lemon.markets”. We obviously have a long way ahead of us, but projects like the one from Melanie really motivate us to keep going and improve/expand our services.

Working with Flutter

Melanie decided to build her own trading dashboard using Flutter. Before we dive into the advantages of Flutter, let us first clarify what Flutter even is:

Flutter is an Open-Source UI Development Kit by Google that was released in 2017. It quickly gained popularity, which the following graphic confirms, as it shows the share of cross-platform mobile frameworks used by software developers worldwide from 2019 to 2021.

Source: Statista

What does cross-platform framework mean?

Well, with a growing number of devices and operating systems, writing apps for each one independently can be quite a challenge that is both time consuming and expensive. That is why, in recent years, cross-platform frameworks have emerged. Those platforms allow you to write code only once and then ensure that the applications/software is capable of running on several different platforms such as Android, iOS, macOS, Windows or Linux. Naturally, usage of those platforms has increased steadily (we ourselves are using React Native to build our mobile app) and many developers are building beautiful projects with it that work on many different platforms in an (almost) identical way.

Actually, some of the most widely used apps are developed with cross-platform frameworks, such as Facebook, Instagram and Tesla (React Native) or Google Ads and Groupon (Flutter). As you can see above, React Native and Flutter are head-to-head when it comes to the share of developers who use either one or the other, with Flutter marginally overtaking React Native in 2021.

Why Flutter, then?

While we do not want to get too deep into the discussion on Flutter vs. React Native (there are some interesting articles here, here and here), we still want to take a minute to outline why building a project with Flutter might be a good idea:

• The Flutter documentation is extensive and it helps you to easily get started with your project. There is also the Flutter Doctor that guides you through the Flutter setup so that everything is working as intended and you can create a new project straight away. In general, the extensive resources to get started with Flutter lead to a comparatively low entry burden.
• The Hot Reload functionality included in Flutter is a huge selling point. It basically allows you to instantly see your code changes in action, which dramatically speeds up the development process and makes collaboration with, e.g., the design apartment super convenient.
• Flutter comes with a large number of components that basically allow you to build any mobile app you can imagine. Due to the included widget, you have every UI element you need, preventing the need to include third-party providers. Also, there is a large community around the framework, which means that an answer to any question imaginable is only one click away.

When we talked to Melanie about the advantages of Flutter, she also mentioned the rich GUI toolkit that allows you to build beautiful UIs very easily. Also, she likes that, besides the mobile app, you automatically get a web app through the same code base as well. And (which may be one of the most important aspects): Melanie has a lot of fun using Flutter.

Creating a lemon.markets Trading Dashboard

As mentioned above, one of Melanie’s main arguments for using lemon.markets was the possibility to create a custom project with it, a trading dashboard in her case. Melanie quickly noticed the need for a Flutter lemon.markets SDK that would make her development life easier.

First things first: A Flutter lemon.markets SDK

As a result of working on the dashboard project, the Flutter lemon.markets SDK pretty much emerged as a “side effect”. If you are interested in building you own mobile app with lemon.markets, check out the corresponding GitHub repository.

The Flutter SDK allows you to conveniently use most of the lemon.markets API functionality such as seeing your state and spaces, retrieving your portfolio, placing and activating an order, seeing previous orders and transactions or searching for specific instruments. It is a great starting point if you want to get started with building your own brokerage (mobile) application and you are highly encouraged to contribute to it.

Next things next: Building the Dashboard

You can find Melanie’s Dashboard project here. You are greeted with a simple 3 tab Interface at the bottom. Through the settings symbol, you have the option to add a Space to the dashboard. You can also conveniently search for different instruments by using the search tab. You additionally have the option to filter for stocks, bonds, ETFs, etc.

Dashboard View. Here, we are using the search function to find Tesla equities.

Under the Portfolio Tab, you can access sub pages for the spaces you connected to the Dashboard via your client ID/client secret. All portfolio items are listed below each other and you can get specific information by clicking on them.

This will bring you to a sub page that provides you with additional options. You can see a performance graph for the specific instrument, which you can filter for day, week and month. Also, you can see at which price the instrument is currently traded and you even have the option to buy more shares of it or sell some of your existing shares.

If you click on the third tab, you get a nice overview of all your orders and transactions. You can conveniently scroll down the list get the most important information at a glance. Pretty cool, right?

Sooo: how do I do this on my own?

Going into extensive detail on the complete implementation of the Flutter Dashboard would go beyond the scope of this blog post, but we still want to take a moment to focus on a few key steps so you get a general understanding of the project structure. You can find an example implementation here.

Before you start, make sure that you have the Flutter SDK and a suitable IDE installed. If you are new to Flutter, we recommend that you dig yourself through the documentation first.

Adding the lemon.markets SDK to your Project

After you’ve created a new project in your IDE, you need to install the lemon.markets SDK to be able to use it throughout your project. As the SDK is not published on pub.dev, yet, you need to use a different approach:

Go to the SDK GitHub repository and git clone the project. Afterwards, you can add the package in the pubspec.yaml file through:

dependencies:
  flutter:
    sdk: flutter

  lemon_markets_client:
    path: "../lemon_market_client"

Alternatively, you can also directly refer to the GitHub URL:

dependencies:
  flutter:
    sdk: flutter

  lemon_markets_client:
    git:
      url: https://github.com/stormqueen23/lemonMarketsClient.git

More details on how to add packages to your app can be found here. Now, all you need to is run:

flutter pub get

and you can use the SDK in your project.

Getting Started

The example project uses some other packages besides the lemon.markets SDK. The most important are provider and get_it. The provider package is used to hold the state of the application and the get_it package manages all service calls.

As a first step, we want to create to Home Screen, which takes place in the main.dart() file and which is our only screen throughout the app. We can do that through:

Since you need a lemon markets account respectively space credentials for using the lemon.markets SDK, we want to create two different widgets to deal with a scenario where the space credentials are provided and one where they are not.

1. No credentials can be found (AddSpaceWidget)
2. Credentials can be found (MainTabWidget)

The lemon.markets Provider

In order to find out which widget should be displayed we need the LemonMarketsProvider. It handles all application-wide data like the selected space. So, on a high level in our widget tree we need to initialise this provider to get the relevant data for the whole application. The init() method checks whether authentication data was saved or not.

If no authentication data can be found we want to have the possibility to add the credentials. The AddSpaceWidget provides two input fields for adding a clientId / a clientSecret and a button that sends this data to our LemonMarketsProvider:

The LemonMarketsProvider receives this call and collects all the data that is needed: (and maybe persists the data)

After finishing this step, we now have our first contact with the lemon.markets SDK, as we want to retrieve an access token for the provided client ID and client secret. After receiving the token, we want to get some additional information for the space (e.g. the UUID, as we need that for some of the endpoints). As the overall goal is to encapsulate all API calls in a service we have the LemonMarketService.

The LemonMarketService

This is the place where all the SDK calls happen. At first, we need to create an instance of LemonMarkets. Via this class we have access to all endpoints of the lemon.markets API that the lemon.markets Flutter SDK supports. For now we need a function to request an access token and get some space detail data:

Now we have all the required data (Access Token and Space UUID), which allows us to make all further requests and thus, get all the data required for our application.

The MainTabWidget

Once you have entered your credentials you are greeted with a screen with two tabs. The search tab and the portfolio tab. Both tabs have one or more widgets for displaying the data and a provider for their state management.

Search Tab

The search tab is very simple. It contains a drop down button for the different instrument types, a text field and a button that starts the search. The different search types are represented by the enum SearchType from the lemon.markets SDK. In the text field you can enter the query you want to search for and subsequently press the button that starts the search. In the widget:

For the search you need the AccessToken that was received earlier in the LemonMarketsProvider. The search is done in the SearchProvider who delegates it to the MarketService:

Additionally, the Market Service needs one more method:

As you can see the search for instruments returns the type ResultList. This is a type from the lemon.markets SDK that, besides the of results, contains a url for the previous and next results. You can use this url for pagination. Depending on whether this next (or previous) is set, a button is displayed that triggers the search for the next url In the widget:

In the SearchProvider:

In the marketService:

For all API calls that return the type ResultList, a second method exists where you just need the AccessToken and the url as parameters. In this case, the complete function is:

searchInstruments(token, currency: currency, limit: limit, offset: offset, query: search, tradable: tradable, types: type != null ? [type] : null) 

and the corresponding function with just the url:

searchInstrumentsByUrl(token, url)

Finally we need a widget to display the result of our instrument search. In our example this is a ListView:

Alright, that’s it. Our Search Tab is done. Time to rest a little.

The Portfolio Tab

Did you take a deep breath and found your inner peace again? Good, then let’s continue.

In general, the Portfolio Tab is a bit more complex. It first collects data from different endpoints before it displays the (aggregated) information. Similar to the Search Tab, it has a provider for storing the data and different widgets for displaying them.

Let’s take a look at the Portfolio Provider. During the init() method it collects all data that is needed to display the basic structure of the portfolio view with all items in the portfolio and the balance of the current space. Thus, it:

1. receives the current state of the space (used to display balance and the cash to invest)
2. receives all portfolio items.

For this we need two new methods in our MarketService:

Again, the lemon.markets SDK returns something of type ResultList for the portfolio items endpoint.

ResultList<PortfolioItem> tmp = await _market.getPortfolioItems(authData.token!, authData.spaceUuid!);

We have seen this before in the searchInstruments() method, but here we handle it a little bit different. Since we need all items for calculating the current portfolio sum, we repeat calling the function for getting the portfolio items unless there are no more items to catch.

while (nextUrl != null) {
     tmp = await _market.getPortfolioItems(authData.token!, nextUrl);
     ...
}

After getting the Space state and the portfolio items, we now have all data to display the basic structure of our portfolio list and we can start rendering the UI. We use a FutureBuilder to show a loadingWidget until all data in the init method has been collected.

The last step during the init() method is calling the endpoints for latest quote for each portfolio item and all orders. We use the latest quote to calculate and display the current value of each portfolio item. The orders are used to display the buy and sell dates for each item. We do not need to wait for the result of those calls, as the UI can be updated in the moment a result is received. In the PortfolioProvider:

Therefore, we need two new methods in the MarketService:

The result of the getOrders endpoint is again of type ResultList and as we have seen before in the getPortfolioItems() method, we want to get all of them to find out all dates of buying and selling an instrument. So we keep calling the endpoint for the orders unless there is no nextUrl.

That’s pretty much all the logic we need to display the portfolio tab. Finally we need some widgets to display our data. We have an expandable header that displays the sums for the portfolio and again a listView that displays all information for the portfolio items:

Aaand, this concludes our little example tutorial. As you could see, we built a small Dashboard with two tabs (Search and Portfolio) using the lemon.markets Flutter SDK. We hope you could follow the implementation steps and are now motivated to build your own mobile application with lemon.markets 👩‍💻 👨‍💻.

Possible extensions

While Melanie’s Dashboard already uses many of our endpoints to create a customised trading dashboard, there are still (almost) a million possible extensions and we want to take a minute to recognise them.

For example, you might be interested in learning more about your portfolio development over time. You could build a graph that visualises how your portfolio items are performing. You could also build a nice pie chart to see the distribution of portfolio items.

How about updating the price development graph for the instruments so that it additionally displays the quotes besides the OHLC data? Or maybe include a real-time price stream on the instruments page (this can only be done when we provide the live market data, we are working on it 😬).

You could also use external data sources to provide even more information on different instruments. How about including a news section on each instruments sub page that displays current news articles, e.g. when Tesla once again presents a crazy feature they’re working on (human-like robots that walk around. Really, Elon?).

We are really excited and a little bit proud that we were able to present Melanie’s Flutter project. If you are as early-stage as we are, it’s really nice to see community projects come to life that perfectly embody our take on lemon.markets. We hope you had fun reading this article, got inspired to build your own dashboard (or brokerage project in general) and were able to follow the implementation.

Once again, you can find the GitHub repo for the lemon.markets Flutter Wrapper here, an example project here and the current project version here.

And of course, don’t forget to sign up to lemon.markets here.

We are looking forward to welcoming you on lemon.markets very soon.

Marius and the 🍋.markets Team