The Flutter app demonstrates displaying data in a weekly format

  Chart, Flutter App

Flutter weekly chart

The Flutter app demonstrates displaying data in a weekly format. I came across this kind of screen in the app that I have been working on called Ergonomic Productivity Timer and I want to share the code of the weekly chart screen. If you find this helpful don’t forget to leave a star at the repository.

Ergonomic Productivity Timer is productivity timer that care for health!

Get it on Google Play Store and App Store today!

Google Play Store

App Store

How it look like?

Simulator Screen Recording - iPhone 12 Pro Max - 2021-07-16 at 21 27 53

What do the data mean?

Each day in the week, the height of the chart is propotional to the fraction of each day data divided by the max value of the week. In this case, the max value of the week is on Friday.

Change current week

In this example, we only display the current and the previous weeks. We also hilight today date on current week. Suppose today is Friday, July 16th. Current week is 12 Jul – 18 Jul starting from Monday to Sunday.

Current week state

Previous week state

Library

This app use GetX as state management library.

Download Flutter weekly chart app source code on GitHub