Writing my own Stock-Watchlist App in Flutter - Minimum Viable Experiment

Been wanting to write an App for my phone since forever, before I even had a smartphone in fact, and nowadays had the note hanging on my whiteboard, judgingly looking at me.

This month (2019-09) I made this long had dream a reality.

daniel biegler devblog flutter app thumbnail

What pushed me over the edge to start this

Maybe some of you know that this year (2019) I started my stock trading journey, so I started using a couple different finance apps to easily catch up on news, my watchlist, quickly look up prices for different instruments, you get the idea.

In the beginning this was enough for me, I was only getting started so I didn't exactly know what I want to know, what I want to see, how I want to interact with all the information.

Soon I'll be trading for a whole year and know a lot more than in the beginning.

Now I want things, I expect things and I wish for things from my tools.

Like I said, I tried out a couple of different apps, narrowed them down and ended up with using the Finanzen.net-App as my daily driver. And before I continue I'd like to mention that the devs working on that app are probably really nice people and I hold no grudge against them personally.

Here it goes: I am greatly dissatisfied with the app's perfomance - so much so in fact, that this genuinely is the straw that broke the camels back.

Freezes, bugs, bad user experience, oh boy countless bugs, missing functionality, more bugs, weird behaviour and last but not least.. the bugs - did I mention those?

Like I said, I do not intend to shit on individual devs but that app currently is in a state that it makes me not want to use it anymore.

So I set out to prove to myself that I could do better.

Developing an app - where to start?

So the first step is to prove to myself that I can do it. I like to break such a problem down to a MVP or MVE, "Minimum Viable Product" or "Minimum Viable Experiment" respectively.

If you ever thought about making a product you know that feeling of having a million ideas for features and stuff you want to have, but this more often than not culminates in a half baked project that gets abandoned half way through because you don't make much progress and lose interest. (Been there, done that..)

iamdevloper screenshot dead side projects

I found the key for me is to strive for a Minimally Viable Experiment.

Add all the stuff you think about to a backlog and strip out the most essential pieces, the core features that you need - not the ones you want. This is key. This helps you focus and to get something out the door. Don't spend time or at least don't spend much time on design. Make it work. A product that looks wonky, but works, still provides some value. A product that looks amazing but doesn't work is worthless.

Making the first prototype

I dove into Dart and Flutter instead of native Android Dev because I'd like to have the option to also release on iOS from the same codebase. Been seeing some talks at conferences about Flutter and it looked quite intriguing.

Read up on documentation, watch some tutorials, write code, read documentation, write some more code, watch some more tutorials, .. repeat over and over and then I got this:

daniel biegler devblog flutter app first screenshot

The funny thing here is.. nothing worked, haha. The displayed text is hardcoded because I'm still learning how to display anything on the screen. The button just displays the predefined text, that's it.

I decided that I probably would need three or four "Pages", so to speak.

  • A dashboard for news, some sort of general analytics and the like
  • A search page so that I can look up securities
  • A place where I get detailed info about a security
  • A watchlist page where I can save securities to and look them up later

Next, I needed a way to search for securities and I looked at several APIs and websites that provide that functionality. I narrowed multiple possibilities down to the REST API of Börse Frankfurt because it is a very well made site that responds with very easily parseable JSON.

As an example, if you search for 'test' they respond with objects that look like this:

    "originalValue":"INTERTEK GROUP     LS-,01",
      "others":"Intertek Testing Services PLC"

Super duper comfortable to work with, hats off to you Börse Frankfurt.

Some tinkering later I got the very first search working:

daniel biegler devblog flutter app first search

Next, I made the results into a list so that I can scroll down properly:

daniel biegler devblog flutter app first listview

I created a local sqlite database that holds a couple tables. For example I store some search data, securities and watchlist items. Then I made it possible to save and display items in said watchlist:

daniel biegler devblog flutter app first dialog daniel biegler devblog flutter app first watchlist

After that there was some dynamically generated info when you look up a specific security:

daniel biegler devblog flutter app first security

You see that Slider-Element under the chart? That let's you configure what chart you see from Intraday to one week, all up to ten years. That chart and slider is currently sort of just a placeholder before I implement a proper interactive chart.

In the name of prototyping quickly: Charts currently are just images that are being fetched from an API. Ultimately I'd like to implement charts where you can zoom in/out and show some very basic indicators. No actual trading will get done from the app so it doesn't have to be very comprehensive, some basic ones I'd like to have though.

Then I cleaned up the watchlist so that you get some useful data out of it:

daniel biegler devblog flutter app updated watchlist

It starts to look like something actually usable, eh?

Add the difference to the last trading day so you can spot harsh changes. On the left you can see the previous trading day and the difference in absolute and percentage values. On the right you can see how much your position is currently worth.

daniel biegler devblog flutter app watchlist daily difference

And with that shown, you now know the current state of my app.

  • Search for securities
  • Get some info about them
  • Safe them to a watchlist

It works pretty well so far, so I think I have proven to myself that I indeed am capable of solving my needs and fulfilling my dream of making a (good) app. It is super simple but serves its purpose of being a rough, minimum viable experiment!


The more I laid out the structure and architecture of the app, I found it hard to get a really good overview of how the big picture is gonna look like and I found the way that data flows in Flutter pretty confusing. I heavily relied on Streams and the BLoC Pattern but that introduced many headaches you need to think about and left a bad taste in my mouth. Everything is so disjointed (which can be a good thing) but I found myself writing so much boilerplate code and spent way too much time thinking about the ways I need to work around the streams instead of working on logic for my app that I got frustrated in the end.

Don't get me wrong though, Streams are a cool concept and I see the value in them. Now in hindsight I'd build the app in a different way though. I think it'd be considerably easier with a single source of truth like a Redux Store.

This is why next time you're in for a treat! We're gonna get technical.

What's next

Please keep in mind that this article-series is just for fun and won't be receiving consistent updates. It'll probably be quite a while until the next installment.

I generally plan to release posts after I fixed some bugs, improved the code and implemented something new that's worth showing. This ensures that every post is interesting on it's own instead of little updates that noone really cares about. For this post I let pretty much all of the technical details out and didn't show code. I think I want to change that up next time. Ready yourselves to dive into some code ;)

Did you enjoy this?

Please reach out and tell me what you think. Would you like to see more, would you like to see something implemented or are you interested in something specific?

Thanks for your time, cheers.

- Daniel Biegler

What did you like about this post? Got questions? Get in touch!

( no registration required! )

Noch keine Kommentare vorhanden

Was denkst du?

Side note: Comments will appear after being spam filtered, this might take a moment.

Contact me

© Daniel Biegler
Design & implementation by
Daniel Biegler