Headers & Texts

The Focus UI Kit includes pre-configured, visually appealing widgets for displaying text, similar to the HTML elements \<h1\>, \<h2\>, and so on. We can adopt a similar HTML convention and approach to this in the UI kit.

Demo

To observe the typography widgets in action, kindly navigate to "Elements -> Typography" within the demo application.

The dart file which contains all classes for typography is located in:

focus_ui_kit/components/typography/fui_typography.dart

The FUITypographyTheme class serves as the primary theme class for all typography-related widgets. For further comprehension, kindly refer to this theme class.

Accessing the theme

To access the theme class object, do the following:

@override
Widget build(BuildContext context) {
    FUITypographyTheme fuiTypoTheme = context.theme.fuiTypography;
    
    // ...
}

Typography	Widget Class
Pre-Header	The widget for Pre-Header, which is `PreH`, for italic, you could use `PreHI`
Header 1	Correspond to the HTML's <h1>, the widget class is `H2`; for italic, you could use `PreHI`.
Header 2	Correspond to the HTML's <h2>, the widget class is `H2`; for italic, you could use `H2I`.
Header 3	Correspond to the HTML's <h3>, the widget class is `H3`; for italic, you could use `H3I`.
Header 4	Correspond to the HTML's <h4>, the widget class is `H4`; for italic, you could use `H4I`.
Header 5	Correspond to the HTML's <h5>, the widget class is `H5`; for italic, you could use `H5I`.
Normal/Regular Text	The widget class is `Regular`. This is the most used widget for text display. To have bold effect, use `RegularB` To have italic effect, use `RegularI`. To have both bold and italic, use `RegularBI`.
Small / Hint Text	The widget class is `SmallText`. This is to display text with smaller fonts than Regular. To have bold effect, use `SmallTextB` To have italic effect, use `SmallTextI`. To have both bold and italic, use `SmallTextBI`.
Input Field Label Text	The widget class is `FieldLabel`. This is usually used for labelling input fields.

Usage

These typography widget classes typically share common parameters. Their usage is generally similar across.

To display H1 (only text)

H1(Text('This is H1'));

To display H1 (text and icon)

H1(
  Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      Padding(
        padding: const EdgeInsets.only(right: 20),
        child: Icon(FontAwesome.triangle_exclamation_solid),
      ),
      Text('This is H1 with Icon'),
    ],
  ),
);

To override the color

H1(Text('This is H1', style: TextStyle(color: Colors.red)));

26 March 2025

Focus Theme UI Kit Documentation Help