Views / Screens

1. Requirements Document

Overview

Pre-composed screen templates that implement common app patterns, such as "Master-Detail", "Settings", "Profile", or "Dashboard". These aim to reduce boilerplate for standard pages.

user Stories

  • As a Developer, I want to create a settings page with grouped options in 5 minutes.
  • As a Developer, I want a standard "Error/Offline" screen that I can reuse globally.

Functional Requirements

  1. Templates:
    • Dashboard: Grid/Staggered layout with cards.
    • Settings: List of distinct groups (Account, App, Privacy).
    • Onboarding: PageView with indicators and "Skip/Next" logic.
  2. Responsiveness: Adapt layout for Tablet vs Phone automatically.

2. Technical Document

Architecture

System Architecture

Views are composed using intelligent Layout Adapters. The Responsive Adapter inspects screen constraints at runtime to select the most appropriate template (e.g. List vs Grid, or single-pane vs multi-pane).

API Design

Settings View Example

SettingsView(
    sections: [
        SettingsSection(
            title: "Account",
            tiles: [
                 SettingsTile(title: "Email", subtitle: "me@example.com"),
                 SettingsTile.switch(title: "Dark Mode", value: true),
            ]
        )
    ]
)

Master-Detail Adapter

Designed to work with SplitView layout logic.

MasterDetailView(
    master: ProductList(),
    detailBuilder: (id) => ProductDetails(id),
    breakpoint: 800, // Show side-by-side if width > 800
)