Flutter – Charts and Stopwatches

Hi Friends,

Hope you are all well. In this post let’s talk about charts. We’ll see how to build a cool looking stopwatch using radial charts.

To learn basics of flutter get my course at a discounted price – here.

Other courses on flutter – here. (Affliate link – keeps my site alive by helping me pay for hosting)

Let’s begin.

Screecasts of this post are available in three parts.

Part – 1:

Part – 2:

Part – 3:

 

The complete code for this post is available – here.

 

First let’s create a new application and then start from there.

Let’s create three Floating action buttons first.

Whoa, that’s too much code dude, break it down..

First, I have created three floating actions buttons and I these buttons will be used to manipulate a stop watch.

Then I have written three functions namely startWatch(), stopWatch() and resetWatch() to perform actions on the Watch.

Alright dude, now I get it, you have simply created a Watch and then you are stopping it, starting it or resetting the time using three buttons. Fine, now how do you update the UI..?

Well, for that specific purpose I am using a Timer. The timer will start whenever the watch is started and start calling the callback function (updateTime) every 100 milliseconds, i.e., 1/10th of a second. Nice.

Now run the app. If everything goes fine then you would be able to see a nice stop watch with three buttons to control it.

Bringing in the chart:

Cool, now let’s represent the time using a radial chart.

To do that first install a package. Open pubspec.yaml and under dependencies add flutter_circular_chart as a dependency as shown below.

Cool, let’s go ahead and bring in this chart into our app.

Now, rather than bringing it in piece by piece, I’ll just go ahead and throw the entire code up here and then try to explain it.

Wow, okay that’s lot of code.. too much code..

Let’s break this down.

  1. I am bringing in an animated circular chart and replacing the existing text widget with it. This chart will have a global key which I will then use to update the chart with data.
  2. This chart will use percentages as values. So, for every 1 second I need to pass 1.6 as the value to the chart. i.e., 1 second is 1.6, 2 seconds is 3.2 and so on and so on.
  3. The generatechartdata() function takes in two arguments, min & seconds. These two will be represented by two segments in the chart. Note that whenever the chart is updated, the seconds (counted from zero to 59) and minutes should be sent to this function.
  4. A circularstackentry contains a set of segment entries, in essence a circularstackentry is like the whole chart whereas the segment entries are the individual segments of the chart.
  5. Now we need to reset the seconds segment every 59 seconds. So we have the below code included in the updateTime() function.

6. I would highly recommend you to watch the videos to get a clear and better understanding of the above block of code.

Alright, now if you run the app you’ll see a nice stopwatch with charts as shown below.

Screenshot_20180702-234532

Screenshot_20180702-234540

Looks cool right?

Now try to get the current time of a device and then sync it with three segments representing hour, minute and seconds respectively to create a cool looking clock.

If you found this helpful, kindly share it with someone and help them too.

Support me; buy my course – click here.

Join our flutter communtiy – click here.

Thanks for reading. Peace.. :)

Liked it? Take a second to support admin on Patreon!