IDA - Institutionen för datavetenskap

# Project Assignment: Build Your Own GUI Library ### 1. Introduction and Goals Modern frameworks like React-Native, Flutter, and Jetpack Compose provide powerful, pre-built components to quickly build user interfaces. But how do these components work "under the hood"? How are layout, rendering, and interaction handled from scratch? The goal of this project is for you to gain a deeper understanding of these concepts by building your own minimal GUI library. You will implement basic UI and layout components from the ground up, using only the most primitive building blocks offered by your chosen framework. This project aims to develop your understanding of: * Component lifecycles and state management. * The layout and rendering process. * Handling user interaction (gestures and events). * Creating reusable and customizable component APIs. ### 2. Tech Stack Choose **one** of the following frameworks to build your library: * **React-Native** * **Flutter** * **Kotlin (with Jetpack Compose)** ### 3. Core Requirements Your library should be a reusable module/package that can be imported into a sample application. The library must include at least: 1. **Two (2) UI Components:** * These are the visible elements that the user interacts with. * Examples: `Button`, `Card`, `InputField`, `ToggleSwitch`. 2. **Two (2) Layout Components:** * These are "invisible" components whose purpose is to structure and position their child components. * Examples: `VStack` (or `Column`), `HStack` (or `Row`), `ZStack` (or `Stack`), `Spacer`. **Most importantly:** You must build these from scratch. Avoid using high-level, pre-built components like `Button`, `Scaffold`, `AppBar`, `Column`, `Row`, etc., from the framework. The goal is to recreate their functionality yourself. ### 4. Allowed Primitive Components To enable you to build from the ground up while still having a starting point, here is a list of the low-level primitives you **are allowed** to use for each framework. All other functionality should be built on top of these. #### For React-Native: * `View`: The most basic component for creating rectangular areas and acting as a container. * `Text`: For rendering text. * `Pressable`: A low-level component for detecting various stages of press interactions. * `StyleSheet`: For defining styling (colors, margins, flexbox rules, etc.). #### For Flutter: * `CustomPaint` and `Canvas`: For drawing arbitrary shapes directly on the screen. * `GestureDetector`: A raw widget for capturing gestures like taps and drags. * `CustomMultiChildLayout` (or `Layout` in Compose): Gives you full control over measuring and positioning multiple child widgets. #### For Kotlin (Jetpack Compose): * `Canvas`: A composable function that provides a drawing surface (`DrawScope`) for low-level drawing functions. * `Modifier.pointerInput`: A modifier for capturing raw pointer events. * `Layout`: The most basic composable function for layout, requiring you to implement the measurement and placement logic yourself. ### 5. Suggested Components to Implement **UI Components:** * **Button:** Should be able to display text, handle `onPress` events, and visually react to presses. * **Card:** A container with a shadow, rounded corners, and padding. * **InputField:** A rectangle that can receive text input. * **ToggleSwitch:** A switch that can be in an on/off state with a smooth animation. **Layout Components:** * **VStack/Column:** Arranges its children vertically, with support for `spacing` and `alignment`. * **HStack/Row:** Arranges its children horizontally. * **ZStack/Stack:** Places children on top of each other in the z-axis (depth). ### 7. Submission * A link to a Git repository (e.g., GitHub/GitLab) containing: * The source code for your library. * A simple example application demonstrating the use of all your components. * A short `README.md` file describing the library, the design choices you made, and how to run the example application.