---
title: "Trivet"
kind: student-project
location: "Holy Angel University"
tags: [students, student-work, appdev]
summary: "A weekly balance tracker for work, health and leisure."
---

*A final project from Applications Development (Flutter), 2026 first semester. Part of [Seventy-three Flutter apps, and the eight I keep showing people](/calendar/2026-s1-appdev-students).*

<figure data-lightbox-group style="max-width: 22rem; margin: 0 0 var(--space-6, 2rem)"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/trivet/square.webp"><img src="/media/projects/2026-1st-sem/trivet/square.webp" width="1080" height="1080" alt="Trivet, the project's square image" loading="eager" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>

## What it is

Trivet shows how many hours went into Work, Health and Leisure this week, side by side, so you can see when one of them is quietly crowding out the other two. A trivet has three legs. You can see where the name came from.

Built with Flutter and Dart.

## Why it is here

The idea is small and the execution is calm, which is a harder combination than it sounds. The docs walk through the palette, the type scale and what changed in the design and why, which is the kind of paper trail I wish I kept myself.

## Find it

- Project: [github.com/Keonzane/Trivet](https://github.com/Keonzane/Trivet)
- Live: [keonzane.github.io/Trivet](https://keonzane.github.io/Trivet/)
- GitHub: [@Keonzane](https://github.com/Keonzane)

## Screenshots

<div class="gallery" data-lightbox-group style="--gallery-min: 14rem; align-items: start">
<figure class="gallery__item" style="grid-column: 1 / -1"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/trivet/shot-1.webp"><img src="/media/projects/2026-1st-sem/trivet/shot-1.webp" width="1280" height="800" alt="Trivet, screenshot 1 of 3" loading="lazy" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>
<figure class="gallery__item"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/trivet/shot-2.webp"><img src="/media/projects/2026-1st-sem/trivet/shot-2.webp" width="1170" height="828" alt="Trivet, screenshot 2 of 3" loading="lazy" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>
<figure class="gallery__item"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/trivet/shot-3.webp"><img src="/media/projects/2026-1st-sem/trivet/shot-3.webp" width="1170" height="828" alt="Trivet, screenshot 3 of 3" loading="lazy" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>
</div>
