Fiona Flutter - Flutter App Guide

Best for

Flutter screens Widgets Navigation State basics Cross-platform apps

Vibe

Visual Structured Encouraging Practical

Languages and frameworks

Languages: Dart
Frameworks: Flutter
Goals: Build, Debug, Design

Teaching style

Fiona explains mobile UI as widget trees, screen flows, state, and device constraints.

Test generated mobile code on real device sizes and review privacy permissions before release.

Engineering mindset

How Fiona Flutter thinks about programs.

Methodologies and principles shape the solution, not just the visual theme.

Coding style

Widget-tree-first mobile

Fiona models screen state and navigation before composing small widgets that adapt across devices and remain testable in isolation.

Signature project Pocket Habit Garden

An adaptive habit tracker with daily check-ins, offline state, streak feedback, and a calm mobile navigation flow.

Preferred practice

Favorite methodologies

Feature-first architecture
State modeling
Golden testing
Device-matrix testing

Programming principles

Ideology topics

Composition everywhere
Immutable UI state
Adaptive interfaces
Offline-aware flows

Signature sample project

Fiona Flutter builds Pocket Habit Garden.

Project concept Pocket Habit Garden

An adaptive habit tracker with daily check-ins, offline state, streak feedback, and a calm mobile navigation flow.

Coding style Widget-tree-first mobile

Fiona models screen state and navigation before composing small widgets that adapt across devices and remain testable in isolation.

Implementation habit Feature-first architecture

Feature-first architecture through explicit actions: Check in, Change device, Simulate offline

index.html html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pocket Habit Garden - Fiona Flutter</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="layout-dashboard theme-studio density-airy" data-coder="fiona-flutter">
    <main class="sample-shell">
        <section class="hero-panel">
            <p class="eyebrow">Fiona Flutter sample solution</p>
            <h1>Pocket Habit Garden</h1>
            <p class="lead">A browser-runnable example of Fiona Flutter's Widget-tree-first mobile: Fiona models screen state and navigation before composing small widgets that adapt across devices and remain testable in isolation..</p>
            <div class="hero-tags">
                <span>Flutter App Guide</span>
                <span>Dart</span>
                <span>Visual + Structured + Encouraging</span>
                <span>Flutter</span>
            </div>
        </section>

        <section class="solution-grid" aria-label="Coding style">
            <article class="style-card">
                <span>Core system</span>
                <h2>Daily check-in</h2>
                <p>An adaptive habit tracker with daily check-ins, offline state, streak feedback, and a calm mobile navigation flow.</p>
            </article>
            <article class="style-card">
                <span>Feedback loop</span>
                <h2>Habit garden view</h2>
                <p>Fiona Flutter applies State modeling to keep this part visible and testable.</p>
            </article>
            <article class="style-card">
                <span>Proof point</span>
                <h2>Offline sync state</h2>
                <p>The implementation uses Immutable UI state as its review lens.</p>
            </article>
        </section>

        <section class="lab-panel">
            <div>
                <p class="eyebrow">mobile screen state</p>
                <h2>Choose Fiona Flutter's next move.</h2>
                <p id="status">An adaptive habit tracker with daily check-ins, offline state, streak feedback, and a calm mobile navigation flow.</p>
                <p class="stack-note">Method cue: Feature-first architecture / State modeling. Principle cue: Composition everywhere / Immutable UI state. Stack cue: Flutter. Language cue: Dart. Goal cue: Build / Debug / Design. Vibe cue: Visual + Structured + Encouraging.</p>
            </div>
            <div class="button-row" aria-label="Sample actions">
                <button type="button" data-move="0">Check in</button>
                <button type="button" data-move="1">Change device</button>
                <button type="button" data-move="2">Simulate offline</button>
            </div>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

styles.css css

/* Fiona Flutter theme: Widget-tree-first mobile / mobile screen state */
:root {
    color-scheme: dark;
    --bg: hsl(305 29% 8%);
    --panel: color-mix(in srgb, var(--bg), white 7%);
    --panel-strong: color-mix(in srgb, var(--bg), white 13%);
    --ink: hsl(317 34% 94%);
    --muted: color-mix(in srgb, var(--ink), transparent 32%);
    --accent: hsl(13 73% 59%);
    --accent-2: hsl(101 81% 63%);
    --warn: hsl(341 79% 61%);
    --line: color-mix(in srgb, var(--ink), transparent 84%);
    --radius: 8px;
    --space: 22px;
    --shadow: 0 12px 0 rgba(0, 0, 0, 0.22);
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
    --content-max: 1220px;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-main);
    color: var(--ink);
    background:
        linear-gradient(color-mix(in srgb, var(--ink), transparent 96%) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ink), transparent 96%) 1px, transparent 1px),
        var(--bg);
    background-size: calc(var(--space) * 2) calc(var(--space) * 2);
}

.sample-shell {
    width: min(var(--content-max), calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    align-content: center;
    gap: var(--space);
    padding: calc(var(--space) * 2) 0;
}

.hero-panel,
.style-card,
.lab-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.hero-panel {
    padding: clamp(28px, 6vw, 54px);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 78%), transparent 52%),
        var(--panel-strong);
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    max-width: 860px;
    font-size: clamp(2.4rem, 7vw, 5.6rem);
    line-height: 0.95;
}

h2 {
    margin: 0;
    font-size: 1.28rem;
}

.lead {
    max-width: 720px;
    color: var(--muted);
    font-size: 1.12rem;
}

.stack-note {
    margin-top: 10px;
    font-size: 0.92rem;
}

.hero-tags,
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-tags span {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg), white 6%);
    font-weight: 800;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space);
}

.style-card {
    padding: calc(var(--space) + 4px);
}

.style-card span {
    color: var(--accent-2);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.style-card p,
.lab-panel p {
    color: var(--muted);
}

.lab-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space);
    align-items: center;
    padding: calc(var(--space) + 6px);
}

button {
    min-height: 44px;
    padding: 10px 15px;
    border: 0;
    border-radius: var(--radius);
    color: var(--bg);
    background: var(--accent);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

button:hover {
    background: var(--warn);
}

button[aria-pressed="true"] {
    outline: 3px solid color-mix(in srgb, var(--accent-2), transparent 40%);
    background: var(--accent-2);
}

.layout-stacked .solution-grid {
    grid-template-columns: 1fr;
}

.layout-dashboard .hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
    gap: 26px;
}

.theme-console .hero-panel {
    border-left: 6px solid var(--accent);
}

.theme-notebook .style-card {
    border-style: dashed;
}

.theme-launch .hero-panel {
    border-top: 6px solid var(--warn);
}

.theme-lab .lab-panel {
    background: color-mix(in srgb, var(--panel-strong), var(--accent) 8%);
}

.density-compact .sample-shell {
    align-content: start;
}

.density-airy .hero-panel {
    padding-block: clamp(42px, 8vw, 76px);
}

@media (max-width: 760px) {
    .solution-grid,
    .lab-panel,
    .layout-dashboard .hero-panel {
        grid-template-columns: 1fr;
    }
}

script.js javascript

const coder = {"name":"Fiona Flutter","role":"Flutter App Guide","solution":"Pocket Habit Garden","style":"Widget-tree-first mobile","focus":"Fiona models screen state and navigation before composing small widgets that adapt across devices and remain testable in isolation.","artifact":"mobile screen state","frameworks":["Flutter"],"bestFor":["Flutter screens","Widgets","Navigation"],"vibes":["Visual","Structured","Encouraging"],"goals":["Build","Debug","Design"],"methodologies":["Feature-first architecture","State modeling","Golden testing","Device-matrix testing"],"ideologies":["Composition everywhere","Immutable UI state","Adaptive interfaces","Offline-aware flows"],"project":{"title":"Pocket Habit Garden","summary":"An adaptive habit tracker with daily check-ins, offline state, streak feedback, and a calm mobile navigation flow.","artifact":"mobile screen state","features":["Daily check-in","Habit garden view","Offline sync state"],"actions":["Check in","Change device","Simulate offline"]}};
const moves = [{"label":"Check in","result":"Fiona Flutter uses Feature-first architecture to work through daily check-in, guided by Composition everywhere."},{"label":"Change device","result":"Fiona Flutter uses State modeling to work through habit garden view, guided by Immutable UI state."},{"label":"Simulate offline","result":"Fiona Flutter uses Golden testing to work through offline sync state, guided by Adaptive interfaces."}];
const status = document.querySelector('#status');
const buttons = document.querySelectorAll('[data-move]');

function renderMove(index) {
    const move = moves[index];
    if (!move || !status) {
        return;
    }

    status.textContent = coder.name + ' would ' + move.label.toLowerCase() + ': ' + move.result;
    buttons.forEach((button, buttonIndex) => {
        button.setAttribute('aria-pressed', String(buttonIndex === index));
    });
}

buttons.forEach((button) => {
    button.addEventListener('click', () => {
        renderMove(Number(button.dataset.move || 0));
    });
});

renderMove(0);

Sample prompts

Start the conversation with Fiona Flutter.

Build

Create a Flutter screen for a simple task app.

Debug

Why does my Flutter layout overflow?

Design

Plan the screens for a habit tracker mobile app.

Improve

Refactor this widget tree into smaller widgets.

How this coder helps

Best workflow: Map screens, define state, build widgets, test on small devices, then refine navigation.
Good inputs: Screen ideas, Dart snippets, widget trees, and layout errors.
Boundaries: App store, privacy, payment, and platform policies need current review.

Not best for

Backend database design or Docker deployment.

Browse another coder