UI Components¶
Nokken includes several shared UI components for consistency:
Theming System¶
Key Components¶
AppTheme
: Base theme definitions and spacing/padding constantsAppColors
: Theme-aware color valuesAppTextStyles
: Theme-aware text stylesAppIcons
: 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