coderqh

Tendora — Flutter Habit Tracker UI Kit

A habit tracker kit built around one tap a day, with a hand-painted yearly heatmap on every habit.

Tendora — Flutter Habit Tracker UI Kit

The live preview on CodeCanyon is this app compiled for the web: the real build, not a video.

Tendora is organized around the moment a user actually opens a habit app: checking things off. The Today screen sorts habits into morning, afternoon and evening, shows a segmented bar for the day's progress, and gives each habit a large ring you tap to mark it done, with its current streak beside it. Finish everything and a small celebration screen appears.

Behind that, every habit has a detail page with a full-year calendar heatmap, and a stats screen adds streak records, a thirty-day completion rate, an all-habit heatmap and a leaderboard of streaks. The heatmap, weekly dots and check ring are custom-painted in Dart, so there is no chart library to install. The look is calm: ink navy, a marigold accent and outlined cards.

Features

  • Today list grouped by part of day, with a segmented progress bar and a tap-to-complete ring per habit
  • Year-long calendar heatmap on each habit's detail page, drawn with a custom painter
  • Stats screen with current and best streak, thirty-day completion rate, total check-ins and a streak leaderboard
  • Habit editor covering emoji, color, category, weekdays, part of day and reminder time
  • Habit catalog with category filters, an archive and a history view
  • Roughly fourteen months of sample check-in history so charts look lived-in on first run
  • GetX layering of views, controllers, services and models, with demo data in one file
  • Skeleton loaders and empty states on every list
  • Light theme plus a deep-navy dark theme, both from one color file

What it looks like

8 images
Tendora palette, type pairing and outlined card components — Tendora
Tendora palette, type pairing and outlined card components
Habit screens in light and deep-navy dark theme — Tendora
Habit screens in light and deep-navy dark theme
Habit detail with yearly heatmap and streak stats — Tendora
Habit detail with yearly heatmap and streak stats
Today list with check rings and daily progress bar — Tendora
Today list with check rings and daily progress bar
Habit editor and catalog with category filters — Tendora
Habit editor and catalog with category filters
Profile and settings screens — Tendora
Profile and settings screens
Onboarding and sign-in screens — Tendora
Onboarding and sign-in screens
Overview sheet of every Tendora screen — Tendora
Overview sheet of every Tendora screen

Who it is for

  • You are building a habit, routine or self-improvement app and want the daily check-in to feel good from day one.
  • You want streak and heatmap visuals without adding and maintaining a charting package.
  • You need a front end ready to connect to your own sync service or API.

In the box

from the shipped zip
  • Full Flutter source in habit_ui_kit/, no obfuscation and no licence server
  • Offline HTML documentation: setup, re-theming, app name and bundle id, troubleshooting
  • 5 Dart test files in the app

Run it after download

the app
# unzip the download, then
$ cd habit_ui_kit
$ flutter pub get
$ flutter run

Setup, including any keys or services the app talks to, is covered step by step in the bundled documentation.

Spec

measured
Screen widgets15
Dart files72
Tests in the package5
Dart SDK^3.7.0
Back endNone bundled; the service layer is where yours goes
PlatformsiOS + Android, one codebase

Counted from tendora-v1.0.zip, the file uploaded to CodeCanyon. Screen widgets are the view, screen and page classes in the source, so the number can differ slightly from a count of routes.

Questions

Something else? Ask on the item's CodeCanyon page; the author answers there.

Where do I plug in my own storage or API?

The app talks to mock services whose methods return Futures. Swap their bodies for your HTTP calls or local database and the screens and controllers carry on unchanged.

Are the streaks and heatmaps real calculations?

Yes. Streaks, completion rates and the heatmaps are computed from the check-in records, so once your data flows in, the numbers follow it.

What does the licence let me do?

A Regular licence covers one end product, including one you build for a client. Each further app needs another licence.

More UI kits and booking apps

same author
See Tendora on CodeCanyon →

Sold on Envato's CodeCanyon marketplace, which handles payment, VAT, invoices and the download.