Summary The application utilizes Jetpack Navigation with Compose to manage screen transitions and the back stack. The navigation structure is divided into several nested graphs (Dashboard, Insights, Settings, Limits) to organize features logically. Users primarily navigate using a bottom navigation bar, while specific flows like “Onboarding” or “Creating a Limit” are handled as distinct navigation sequences.
Graph : NavGraph.ktRoutes : NavGraph.kt (Contains ScreenRoutes sealed class)Components : AppNavigationBar.ktTransitions : Transitions.kt Screen Map This diagram illustrates the high-level navigation flow, starting from the app launch.
All Screens The application defines routes using a sealed class structure. Below are the primary destinations.
Route Screen Description dashboardMainScreen The primary landing page showing daily stats. insightsInsightsScreen Visual data analysis and usage trends. notification_insightsNotificationInsightsScreen Analysis of notification patterns. settingsSettingsScreen App configuration and preferences. limitsLimitsScreen Management of app usage limits. onboardingSetupScreen Initial setup flow for permissions and preferences. app_detail/{packageName}AppDetailScreen Detailed usage stats for a specific app. scroll_detail/{date}ScrollDetailScreen Timeline view of scrolling for a specific date. create_limit_groupCreateLimitGroupScreen Screen to configure a new usage limit.
Navigation Patterns Main Navigation The app uses a custom “Pixel-style” bottom navigation bar.
Pattern Used? Implementation Details Bottom Navigation Yes Contains Dashboard , Insights , and Notifications . Features a pill-shaped indicator and spring animations. Nested Graphs Yes Used for dashboard, insights, settings, and limits to isolate navigation stacks. Shared Transitions Yes Uses SharedTransitionLayout for fluid element movement between screens.
Transitions The app uses a custom transition set defined in Transitions.kt.
Enter : A combination of vertical slide, horizontal slide, fade in, and scale up (0.95f to 1.0f).Exit : A combination of vertical slide, horizontal slide, fade out, and scale down.Duration : All animations run for 500ms.
Passing Data Data is passed between screens using route arguments.
Route Argument Type Required? Description app_detailpackageNameString Yes The unique ID of the app to view. scroll_detaildateString Yes The date to visualize (ISO format). dashboard_tabstabString Yes The specific tab to open on the dashboard. create_limit_groupsuggestMinutesInt No Pre-filled time limit suggestion. edit_limit_groupgroupIdLong Yes The ID of the limit group to edit. select_app_groupspresetCategoryString No Filter apps by a specific category.
User Journeys Creating a Limit Group This flow utilizes a nested navigation graph (create_limit_flow) to share a ViewModel between steps.
Editing a Limit Editing uses a specific route that isolates the state for that specific group ID.
App Detail Drill-down Users can navigate from high-level summaries to specific app details.
Last modified on January 25, 2026
