Primitive UI Library

Overview

TDDC73 course project that implements nine UI/layout components (cards, toggle, slider, progress, buttons, inputs, VStack/HStack/ZStack) from scratch using only CustomPaint, GestureDetector, custom RenderBox, and animations. Includes multi-framework labs (Flutter, Kotlin Compose/XML, React Native) and a Next.js documentation/demo site.

Key Features

Primitive UI library with cards, toggles, sliders, progress, buttons, inputs, and stack layouts
Manual rendering/layout via CustomPaint + RenderBox without high-level widgets
Demo app plus Nextra-based docs site and live Vercel demo
Labs comparing identical UI in Flutter, Kotlin Compose/XML, and React Native
Widget tests and requirement documentation

Challenges

Recreating ergonomic UI without relying on Flutter's high-level widgets
Aligning behavior/animations across multiple platform implementations
Documenting components for both coursework and public demos

Solution

Built custom render objects, gesture handling, and implicit animations for each component, paired with exhaustive lab write-ups and a Next.js docs site to show usage and comparisons.

Outcome

Delivered a from-scratch Flutter component library with tested primitives, a live demo, and multi-framework learnings suitable for the TDDC73 curriculum.

Project Information

Technologies

Flutter

Dart

CustomPaint

RenderBox

AnimationController

Kotlin Compose

React Native

Next.js (docs)

View Live Project View Source Code