OudsTopBar class

A platform-adaptive top app bar that displays information and actions relating to the current screen.

Reference design version : 1.0.0

The Bar top is a top-aligned component that displays the screen title and provides access to key actions and navigation elements.

OudsTopBar is a high-level component that provides a consistent top bar experience across platforms by rendering the appropriate underlying widget:

• OudsTopAppBar on Android (based on Material 3 AppBar).
• OudsToolbarTop on iOS (based on CupertinoNavigationBar).

This abstraction allows you to define your app bar once, with the component handling the platform-specific rendering details.

Parameters:

Common parameters

• title: The title to be displayed in the top bar.

• size: The size of the Bar Top defined by OudsTopBarSize.

  • Medium size is only supported in the Material variant.

• translucent: Whether the Bar Top should be translucent.

• leadingActions: A list of actions to display before the title.

  • Material: Supports a single leading action.
  • Cupertino: Supports multiple leading actions.

• trailingActions: A list of actions to display at the end of the Bar Top. These can be type of OudsTopBarActionConfig. The default layout here is a Row, so actions will be placed horizontally. The maximum recommended number of actions is three, it list of OudsTopBarActionConfig, Please use a dropdown menu if you need more than three actions.

Material variant only (ignored on Cupertino)

-materialConfig: This parameter is only applied on Material and other non-iOS platforms where the widget renders an OudsTopAppBar. Use this to control Material-only features like centerTitle or expandedHeight. See OudsTopAppBarConfig. It is ignored on iOS.

Use an OudsTopAppBarConfig object to control Material-specific features such as:

• Centering the title (centerTitle).
• Setting a custom expanded height (expandedHeight).
• Specifying the maximum number of lines for the title (titleMaxLines).
• Enabling avatar support (showAvatar).

Example usage:

The following example shows a simple OudsTopBar with a back button and a trailing search action.

Scaffold(
  appBar: OudsTopBar(
    title: "My Screen",
    leadingActions: [
      OudsTopBarActionConfig.back(
        onActionPressed: () => Navigator.of(context).pop(),
      ),
    ],
    trailingActions: [
      OudsTopBarActionConfig.icon(
        customIcon: "assets/icons/search.svg",
        contentDescription: "Search",
        onActionPressed: () {
          // Handle search action
        },
      ),
    ],
  ),
  body: // ...
)

Platform Differences

• Leading Actions: The Material AppBar typically has a single leading action (e.g., a navigation icon). The Cupertino CupertinoNavigationBar can support multiple leading actions. This widget enforces a single leading action on Android to align with Material Design guidelines.

• Size: The medium and large sizes create an expandable AppBar on Android. On iOS, medium is treated as small.

See also:

• OudsTopAppBar, the Material Design implementation.
• OudsToolbarTop, the Cupertino (iOS) implementation.
• OudsTopBarActionConfig, the configuration object for actions.