Theme Files & How To Access

The Focus Flutter UI Kit is a themable kit, but not in the manner of the Flutter Material or Material3 styles.

How to import / use the FUI widgets and themes

To utilize the UI kit’s FUI (acronym for Focus UI) widgets, simply import a single file.

import 'focus_ui_kit/exports.dart';

Theme Structured

The UI kit comprises a common theme and specific themes for the FUI widgets.

Common Theme

The common theme file is situated at:

focus_ui_kit/theme/fui_theme.dart

Specifically, the FUITheme extension extends the ThemeData class, which provides access to all specific themes of all other FUI widgets.

How to access FUITheme

The FUITheme serves as a comprehensive wrapper that encapsulates the color palette in the UI kit. Furthermore, it provides specific themes (including font sizes and other size parameters) for various FUI widgets.

Here's a general way on gaining access to these themes.

@override
Widget build(BuildContext context) {
    
    /// Colors
    FUIThemeCommonColors fuiColors = context.theme.fuiColors;
    
    /// FUIPanel specifics
    FUIPanelTheme panelTheme = context.theme.fuiPanel;
    
    /// and so on... 
}

Note: Only one theme ("light" theme) is available for now. The "dark" theme may be developed in the near future.

Specific FUI Widget Themes

Each FUI widget or UI category has a distinct theme file. These files are detailed in the corresponding sections on the specific Focus UI widget documentation.

Please refer to the following table for a concise list of FUI widgets and their respective theme files (relative to thelib/focus_ui_kit directory):

FUI Widget	Theme Class	Theme File
General Colors	FUIThemeCommonColors	theme/fui_colors.dart
Major Theme	FUITheme	theme/fui_theme.dart
Accordion	FUIAccordionTheme	components/accordion/fui_accordion_theme.dart
Action Tile	FUIActionTileTheme	components/actiontile/fui_action_tile_theme.dart
Avatar	FUIAvatarTheme	components/avatar/fui_avatar_theme.dart
Buttons	FUIButtonTheme	components/button/fui_button_theme.dart
Calendar	FUICalendarTheme	components/calendar/fui_calendar_theme.dart
DataTable	FUIDataTable2Theme	components/datatable2/fui_datatable2_theme.dart
File Upload	FUIFileUploadTheme	components/fileupload/fui_file_upload_theme.dart
Input Fields	FUIInputTheme	components/input/fui_input_theme.dart
Menu	FUIMenuTheme	components/menu/fui_menu_theme.dart
Modals	FUIModalTheme	components/modal/fui_modal_theme.dart
Toasts	FUIToastTheme	components/notification/fui_toast_theme.dart
Pace Bar	FUIPaceBarTheme	components/pacebar/fui_pacebar_theme.dart
Pane	FUIPaneTheme	components/pane/fui_pane_theme.dart
Popup Menu	FUIPopupMenuTheme	components/popupmenu/fui_popupmenu_theme.dart
Sections	FUISectionTheme	components/section/fui_section_theme.dart
Spinner	FUISpinnerTheme	components/spinner/fui_spinner_theme.dart
Tabs	FUITabTheme	components/tab/fui_tab_theme.dart
Timeline	FUITimelineTileTheme	components/timeline/fui_timeline_theme.dart
Tooltip	FUITooltipTheme	components/tooltip/fui_tooltip_theme.dart
Text - Code Display Box	FUICodeDisplayBoxTheme	components/typography/fui_code_display_box_theme.dart
Text - Quote	FUIQuoteTheme	components/typography/fui_quote_theme.dart
Text Pill	FUITextPillTheme	components/typography/fui_text_pill_theme.dart
Typography	FUITypographyTheme	components/typography/fui_typography_theme.dart
Wizard	FUIWizardTheme	components/wizard/fui_wizard_theme.dart