Skip to content

UI Components

Nokken includes several shared UI components for consistency:

Theming System

Key Components

  • AppTheme: Base theme definitions and spacing/padding constants
  • AppColors: Theme-aware color values
  • AppTextStyles: Theme-aware text styles
  • AppIcons: Centralized icon management

Theme Management

  • Theme state is managed through Riverpod with the themeProvider
  • ThemeUtils provides utility functions for theme management
  • Settings Screen: User preferences for theme are stored and managed by the settings feature
// Provider for the theme mode
final themeProvider = StateProvider<ThemeMode>((ref) => ThemeMode.dark);

// Utility functions for theme management
class ThemeUtils {
  static void toggleTheme(WidgetRef ref) {...}
  static void setTheme(WidgetRef ref, ThemeMode mode) {...}
}

Widgets

SharedWidgets

The SharedWidgets class provides reusable UI components throughout the app

Dialog Service

The DialogService provides centralized management of dialogs and alerts.

Features

  • Standard save/discard changes dialog
  • Delete confirmation dialog
  • Generic back button handler with unsaved changes check