OudsToolbarTop class

OUDS iOS tool bar top design guidelines

Reference design version : 1.0.0

The Toolbar top sits at the top of the screen and provides contextual information and controls related to the current view. It typically displays the page title, and may include navigation actions such as “Back,” as well as supplementary actions like menus.

OudsToolbarTop default appearance is opaque but, if you need a translucent blurred toolbar top as specified on OUDS design side. To do this, use OudsToolbarTop with translucent parameter set to true and avoid wrapping the body in a SafeArea as the content must scroll behind the toolbar top to be visible through the blur.

Parameters:

• style: The style of the the toolbar top, only supports small and large sizes. Defaults to OudsTopBarSize.small. Throws AssertionError if medium is used.

• title: The title displayed in the toolbar top. Optional.

• translucent: Whether the toolbar top should be translucent.. Defaults to false.

• leadingActions: A list of actions OudsTopBarActionConfig displayed on the leading side (left). Optional.

• trailingActions: A list of actions OudsTopBarActionConfig displayed on the trailing side (right). Optional.

Action Guidelines:

• Back Action: When using OudsTopBarActionConfig.back, if the previousPageTitle is too long (more than 12 characters), it will automatically be replaced by the default localized "Back" label to maintain a clean layout, following iOS design conventions.

• Text Actions: For actions created with OudsTopBarActionConfig.text, it is recommended to use short, concise labels (e.g., "Done", "Edit"). Long labels may be truncated or cause layout issues.

Example of code:

OudsToolbarTop(
  style: OudsTopBarSize.small,
  title: 'Profile',
  translucent: true,
  leadingActions: [
      OudsTopBarActionConfig.back(
        previousPageTitle: 'Settings', // Shows: "← Settings"
        onActionPressed: () => Navigator.of(context).pop(),
      ),
    ],
    trailingActions: [
      OudsTopBarActionConfig.icon(
        customIcon: "assets/icons/settings.svg",
        contentDescription: "Settings",
        onActionPressed: () {
          // Handle settings action
        },
      ),
    ],
)