OudsTopAppBar class

OUDS Android Top app bar design guidelines

Reference design version : 1.0.0

Top app bars display information and actions at the top of the screen.

The OudsTopAppBar is a flexible app bar that can be customized with different sizes, icons, titles, and actions. It supports leading icons, avatars, and custom action widgets to fit your app's requirements.

Typically, OudsTopAppBar is used in the Scaffold.appBar property.

OudsTopAppBar default appearance is opaque but, if you need a translucent blurred top app bar as specified on OUDS design side. To do this, use OudsTopAppBar with translucent parameter set to true and :

• Avoid wrapping the body in a SafeArea as the content must scroll behind the app bar to be visible through the blur.
• Set the Scaffold.extendBodyBehindAppBar property to true.

Example of code:

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: OudsTopAppBar(...),
  body: MyScrollableContent(),
);

For the OudsTopBarSize.small size, the app bar has a fixed height. If you need a variable height, you can use OudsTopBarSize.medium or OudsTopBarSize.large, allowing you to adjust the top app bar's height as needed.

Parameters:

• title: The title to be displayed in the top app bar.
• size: The different size for top app bar OudsTopBarSize it can be smal, medium or large.
• trailingActions: The actions displayed at the end of the top app bar. These can be type of OudsTopBarActionConfig or OudsTopAppBarAvatarConfig. 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.
• centerTitle: Whether to center the title. Defaults to false.
• translucent: Whether the top app bar should be translucent.
• expandedHeight: This top app bar's height. Should be applied only for OudsTopBarSize.medium and OudsTopBarSize.large for OudsTopBarSize.small wll be ignored, this value will represent the maximum height that the bar will be allowed to expand.
• titleMaxLines: Specifies the number of lines the title can span for medium and large top app bars.
• showAvatar: Whether to show an avatar as action at the left side of the top app bar. Defaults to false.

OudsTopAppBar(
  size: OudsTopBarSize.small,
  title: 'Profile',
  translucent: true,
  centerTitle: true,
  showAvatar: true,
  leadingActions: [
      OudsTopBarActionConfig.back(
        onActionPressed: () => Navigator.of(context).pop(),
      ),
    ],
  trailingActions: [
      OudsTopBarActionConfig.icon(
        customIcon: "assets/icons/search.svg",
        contentDescription: "Search",
        onActionPressed: () {
          // Handle search action
        },
      ),
    OudsTopBarActionConfig.avatar(
      avatarConfig: OudsTopAppBarAvatarConfig(
        monogram: 'A',
      ),
    ),
   ],
)