Mobile App Navigation & Flows
Relevant source files
The following files were used as context for generating this wiki page:
The Omi mobile application is a Flutter-based interface designed to capture, process, and retrieve conversational data and memories. Its navigation architecture follows a structured hierarchy starting from an 11-step onboarding wizard into a multi-tabbed home environment. The application utilizes state management to handle device connections (via BLE), authentication (Firebase), and real-time transcription displays.
Sources: app/e2e/SKILL.md:120-125, app/AGENTS.md:10-15, README.md:95-100
Onboarding Architecture
Onboarding is managed via a central wrapper (wrapper.dart) that orchestrates an 11-step sequence. This flow is critical for establishing user identity, language preferences, and hardware permissions.
Onboarding Steps
The following table details the sequence of screens encountered during the initial user setup:
| Step | Screen Name | File Reference | Purpose |
|---|---|---|---|
| 0 | Auth | auth.dart | Google/Apple Sign-in |
| 1 | Name | name_widget.dart | User display name entry |
| 2 | Primary Language | primary_language_widget.dart | Transcription language selection |
| 4 | Permissions | permissions_widget.dart | Mic, Bluetooth, and Location access |
| 8 | Speech Profile | speech_profile_widget.dart | Voice identification setup |
| 9 | Knowledge Graph | knowledge_graph_step.dart | Initial data visualization |
| 10 | Complete | complete_screen.dart | Transition to Home |
Sources: app/e2e/SKILL.md:127-138, app/e2e/feature-vector.md:65-70
Onboarding Flow Diagram
The diagram below illustrates the linear progression and decision points within the onboarding module.
Main Navigation Hub (Home)
Once authenticated, the user enters the Home screen (page.dart), which serves as the primary navigation controller. It features a top bar for device management and settings, a central activity area, and a bottom navigation bar with four distinct tabs.
Core Tabs & Pages
- Conversations (Tab 0): Managed by
conversations_page.dart. This tab allows users to browse transcripts, view daily summaries, and access detailed conversation views (conversation_detail/page.dart) which contain Transcript, Summary, and Action Items tabs. - Action Items (Tab 1): Managed by
action_items_page.dart. Tasks are categorized by deadlines (Today, Tomorrow, Later, Overdue). It features a Floating Action Button (FAB) for theaction_item_form_sheet.dart. - Memories (Tab 2): Managed by
memories/page.dart. Provides a searchable list of extracted facts and a visualization viamemory_graph_page.dart. - Apps (Tab 3): Managed by
apps/page.dart. A marketplace for custom Omi apps and integrations.
Sources: app/e2e/SKILL.md:142-175, app/e2e/feature-vector.md:25-45
Application Hierarchy Diagram
This diagram visualizes the structural relationship between the Home hub and its secondary screens.
Settings & Configuration Flows
The Settings Drawer (settings_drawer.dart) provides access to deep configuration options. Navigation within settings is largely gesture-based, utilizing specific widget types like switch for toggles and InkWell for row selections.
Key Settings Modules
- Profile: Manage name, language settings, and speech profiles.
- Device Settings: Requires a BLE connection to manage firmware, LED brightness, and mic gain.
- Transcription: Configure STT (Speech-to-Text) providers (Omi Cloud vs. Custom STT) and API keys.
- Developer Settings: Specialized configuration for MCP API keys and transcription logs.
Sources: app/e2e/SKILL.md:177-205, app/AGENTS.md:55-65
Real-time Interaction Flows
The application handles two distinct live interaction modes: AI Chat and Conversation Capturing.
AI Chat (Ask Omi)
Users trigger the chat via the "Ask Omi" button on the Home screen. This navigates to chat/page.dart, which supports text input, voice recording, and AI-driven responses. This flow is verified to include message actions and a chat apps drawer.
Sources: app/e2e/SKILL.md:147-150, app/e2e/feature-vector.md:33
Conversation Capturing
Initiated via the record button, this navigates to conversation_capturing/page.dart.
Navigation Verification (Flow-Walker)
Navigation integrity is maintained through the "Flow-Walker" pipeline, which uses agent-flutter to verify UI transitions against YAML-defined flow schemas.
Verified Navigation Edges
Based on automated walk-throughs, the following edges represent confirmed navigation paths:
- Home -> Conversations -> Detail -> Notifications Settings
- Home -> Memories -> Memory Search -> Memory Detail
- Home -> Settings Drawer -> Language Settings -> Sub-settings
Flow Status Table
| Flow | Steps | Prerequisite | Verification Target |
|---|---|---|---|
login.yaml | 5 | signed_out | Auth Screen -> Home |
onboarding.yaml | 9 | auth_ready | Step Wizard -> Home |
ask-omi-chat.yaml | 9 | auth_ready | Message input and AI response |
phone-capture.yaml | 9 | microphone_permission | Live audio to processed memory |
Sources: app/e2e/FLOW-WALKER-SKILL.md:15-40, app/e2e/SKILL.md:237-270, app/e2e/feature-vector.md:80-95
Conclusion
The Omi mobile app's navigation is a state-dependent system that transitions from a restrictive onboarding phase into an open, multi-functional dashboard. By utilizing Flutter's widget tree architecture and specialized debugging protocols like Marionette, the project ensures that complex flows—ranging from BLE device pairing to real-time transcription—are both navigable for users and verifiable for developers through automated flow-walking.