Theme Files & How To Access
The Focus 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.
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:
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.
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 the lib/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 |