User interface

User Interface¶

UserInterface {
  presentationStyle: PresentationStyle // (1)!
  swipeToDismiss: SwipeToDismissPolicy // (2)!
  theme: Theme // (3)!
}

enum PresentationStyle {
  fullScreen // (4)!
  bottomSheet // (5)!
  pageSheet // (6)!
}

enum SwipeToDismissPolicy {
  allowAlways // (7)!
  allowHeaderSwipeOnly // (8)!
  protectTheNecessaryPages // (9)!
}

iOS and Flutter only

Specifies the manner in which the SDK's UI overlays the application's existing UI. This setting determines the visual presentation style, such as whether the SDK UI appears as a full-screen overlay, or covers the application with a bottom sheet.
iOS only

This property specifies the policy for dismissing the SDK's user interface through a swipe gesture. It determines how and when the swipe-to-dismiss action can be performed by the user. The policy can vary, allowing for different levels of interaction, such as always allowing a swipe to dismiss, restricting it to certain conditions, or permitting it only when swiping from specific areas of the interface.
Specifies the theme configuration settings that determine the appearance and style of the UI components within the SDK. This includes defining color schemes, typography, and other visual elements to ensure a cohesive and customizable user interface experience.
Presents the SDK in full-screen mode. This style occupies the entire screen, hiding the parent view completely.
Opens the SDK in a bottom sheet.

Partial iOS support

This mode is supported on iOS from version 16 onwards. For older versions, it defaults to pageSheet. Unlike pageSheet, the parent view remains fullscreen but is covered by the sheet, rather than being stacked behind it.
The SDK appears in a page sheet, which partially covers the parent view, allowing users to see some of the underlying content while interacting with the SDK. Unlike a bottomSheet, which keeps parent view fullscreen, a page sheet stacking the parent view behind, slightly shrinking and moving it away from the screen edges.
- This mode is recommended starting from iOS 13. For more information, refer to Best practices from Apple's HIG .
- On Android, this mode behaves as a bottomSheet.
Allows the SDK to be dismissed at any time by swiping down anywhere on the screen.

This policy provides the most flexibility for users, enabling them to close the SDK from any page or context.
Restricts dismissal to swiping down on the header area only.

This policy limits the swipe-to-dismiss gesture to the header area, reducing the likelihood of accidental dismissals.
Applies different swipe-to-dismiss policies based on the page context.
- On pages that are safe to close, such as onboarding or photo picker pages, the allowAlways policy is applied, allowing dismissal from anywhere on the screen.
- On critical pages, such as those waiting for generation or displaying results, the allowHeaderSwipeOnly policy is applied to prevent accidental dismissals.
This policy provides a balance between user convenience and protecting critical workflows, ensuring that users can dismiss the SDK when appropriate while safeguarding important pages.

Theme¶

Theme {
  color: ColorTheme // (1)!
  label: LabelTheme // (2)!
  image: ImageTheme // (3)!
  button: ButtonTheme // (4)!
  pageBar: PageBarTheme // (5)!
  bottomSheet: BottomSheetTheme // (6)!
  activityIndicator: ActivityIndicatorTheme // (11)!
  selectionSnackbar: SelectionSnackbarTheme // (7)!
  errorSnackbar: ErrorSnackbarTheme // (8)!
  productBar: ProductBarTheme // (9)!
  powerBar: PowerBarTheme // (10)!
}

Defines the color scheme, brand colors, and various color states for UI elements.
Typography and text styling for different label types across the interface.
Shapes, sizes, and error state icon for image views.
Buttons styles, including typography and shape configurations for different button sizes.
Navigation bar appearance, including title styling and navigation button icons.
Bottom sheet presentation, including grabber appearance and sheet shape for both main SDK and internal sheets.
Multi-selection interface for list views, including selection controls and action buttons.
Error message presentation, including error icons and retry button styling.
Product information display, including typography for product details and optional price styling.
"Powered By Aiuta" branding element appearance.
Appearance and customization of loading indicators.

Color¶

ColorTheme {
  scheme: ColorScheme // (1)!
  brand: Color // (2)!
  primary: Color // (3)!
  secondary: Color // (4)!
  onDark: Color // (5)!
  onLight: Color // (6)!
  background: Color // (7)!
  screen: Color // (8)!
  neutral: Color // (9)!
  border: Color // (10)!
  outline: Color // (11)!
}

enum ColorScheme {
  light // (12)!
  dark // (13)!
}

Defines whether the SDK uses a light or dark theme. Provided colors should match the scheme.

Affects the style of blur components

On iOS only it affects the appearance of system screens (e.g., photo gallery, share activity, etc.) and ensures that their UIUserInterfaceStyle matches the selected style. For example, if the SDK is set to a light theme but the system theme on the device is dark, the system windows invoked by the SDK will still use the light theme.
Main accent color for primary actions and highlights throughout the interface.

Default ARGB #FF4000FF
Primary color used for main content labels and icons, and important information.

Default ARGB #FF000000
Secondary color used for supporting content and less prominent information.

Default ARGB #FF9F9F9F
Preferably light color in any scheme optimized for use on dark, brand, and neutral backgrounds.

Default ARGB #FFFFFFFF
Preferably dark color in any scheme optimized for use on light backgrounds.

Default ARGB #FF000000
Main background color used throughout the SDK interface.

Default ARGB #FFFFFFFF
Zero-elevation background color.

For the full-screen mode in the dark scheme, this color is used as a page background color, while bottom sheets inside the SDK will still use the background color. In any scheme, it will be used for full-screen image galleries.

It's actually supposed to be black or close to black in any scheme.

Default ARGB #FF000000
Neutral background color used for various UI components.

Default ARGB #FFF2F2F7
Color used for component borders and dividers.

Default ARGB #FFE5E5EA
Color used for blur outlines and checkmark borders.

Default ARGB #FFC7C7CC
Light theme with predominantly light colors in the design.
Dark theme with predominantly dark colors in the design.

Label¶

LabelTheme {
  typography {
    titleL: TextStyle // (1)!
    titleM: TextStyle // (2)!
    regular: TextStyle // (3)!
    subtle: TextStyle // (4)!
  }
}

Defines the text style for large titles, typically used for main headings and prominent text elements.
Specifies the text style for medium titles, commonly used for section headers and secondary headings.
Sets the text style for regular body text and standard content throughout the interface.
Determines the text style for subtle or less prominent text, often used for secondary information and supporting content.

Image¶

ImageTheme {
  shapes {
    imageL: Shape // (1)!
    imageS: Shape // (2)!
  }

  icons {
    imageError36: Icon // (3)!
  }
}

Defines the shape configuration for large image views, allowing customization of the visual appearance for prominent images.
Specifies the shape configuration for small image views, enabling consistent styling for secondary or thumbnail images.
Sets the icon to be displayed when an image fails to load, providing visual feedback for error states.

Button¶

ButtonTheme {
  typography {
    buttonM: TextStyle // (1)!
    buttonS: TextStyle // (2)!
  }

  shapes {
    buttonM: Shape // (3)!
    buttonS: Shape // (4)!
  }
}

Defines the text style for a regular medium-sized buttons.
Specifies the text style for small buttons.
Sets the shape configuration for medium buttons.
Configures the shape for small buttons.

Page Bar¶

PageBarTheme {
  typography {
    pageTitle: TextStyle // (1)!
  }

  icons {
    back24: Icon // (2)!
    close24: Icon // (3)!
  }

  settings {
    preferCloseButtonOnTheRight: Bool // (4)!
  }
}

Defines the text style for page titles in the navigation bar, controlling the appearance of header text.
Specifies the icon used for the back navigation button.
Sets the icon for the close button.
Controls the position of the close button, determining whether it appears on the right side of the navigation bar.

Default falsetrue

Bottom Sheet¶

BottomSheetTheme {
  typography {
    iconButton: TextStyle // (1)!
    chipsButton: TextStyle // (2)!
  }

  shapes {
    bottomSheet: Shape // (3)!
    chipsButton: Shape // (4)!
  }

  grabber {
    width: Number // (5)!
    height: Number // (6)!
    topPadding: Number // (7)!
  }

  settings {
    extendDelimitersToTheRight: Bool // (8)!
    extendDelimitersToTheLeft: Bool // (9)!
  }
}

Defines the text style for icon buttons within the bottom sheet.
Specifies the text style for chips-style buttons in the bottom sheet interface.
Sets the shape configuration for the bottom sheet container, controlling its visual appearance.
Configures the shape for chips-style buttons, determining their visual style.
Controls the width of the grabber handle used for dragging the bottom sheet.
Determines the height of the grabber handle for bottom sheet interaction.
Sets the vertical padding between the grabber and the top of the bottom sheet.
Controls whether the bottom sheet delimiters extend to the right edge.
Determines whether the bottom sheet delimiters extend to the left edge.

Activity Indicator¶

ActivityIndicatorTheme {
  icons {
    loading14: Icon | null // (1)!
  }

  colors {
    overlay: Color // (4)!
  }
  settings {
    indicationDelay: Number // (2)!
    spinDuration: Number // (3)!
  }
}

Optional icon for the activity indicator. If not provided, the system's default indicator will be used.

^{System activity indicator by default}
The time in milliseconds before the activity indicator appears. If the task completes before this delay, the indicator will not be shown. Otherwise, the indicator will appear.
The duration in milliseconds for one complete rotation of the activity indicator. This setting controls how fast the indicator spins, providing a visual cue of activity progress.

The spin duration only applies when a custom icon is used for the activity indicator. If the system's default indicator is used, this setting will be ignored and the indicator will spin with the system default speed.
Overlay color used to cover any view when it needs to be locked for an activity. The activity indicator will be placed at the center of this overlay.

Selection¶

SelectionSnackbarTheme {
  strings {
    select: String // (1)!
    cancel: String // (2)!
    selectAll: String // (3)!
    unselectAll: String // (4)!
  }

  icons {
    trash24: Icon // (5)!
    check20: Icon // (6)!
  }

  colors {
    selectionBackground: Color // (7)!
  }
}

Defines the text label for the select action button in the selection interface.
Specifies the text label for the cancel action button to dismiss the selection mode.
Sets the text label for the select all action to choose all available items.
Configures the text label for the unselect all action to deselect all chosen items.
Specifies the icon used for the delete action in the selection interface.
Sets the icon displayed to indicate selected items in the interface.
Controls the background color of the selection snackbar component.

Error¶

ErrorSnackbarTheme {
  strings {
    defaultErrorMessage: String // (1)!
    tryAgainButton: String // (2)!
  }

  icons {
    error36: Icon // (3)!
  }

  colors {
    errorBackground: Color // (4)!
    errorPrimary: Color // (5)!
  }
}

Defines the default text message displayed when an error occurs in the interface.
Specifies the text label for the retry action button in the error snackbar.
Sets the icon displayed to indicate the error state in the snackbar.
Controls the background color of the error snackbar component.
Defines the primary color used for error-related elements in the snackbar.

Product¶

ProductBarTheme {
  prices: ProductBarPricesTheme | null // (1)!
  typography {
    product: TextStyle // (2)!
    brand: TextStyle // (3)!
  }

  icons {
    arrow16: Icon // (4)!
  }

  settings {
    applyProductFirstImageExtraPadding: Bool // (5)!
  }
}

ProductBarPricesTheme {
  typography {
    price: TextStyle // (6)!
  }

  colors {
    discountedPrice: Color // (7)!
  }
}

Configures the price display settings for the product bar, including typography and colors for price elements.
Defines the text style for product names in the product bar.
Specifies the text style for brand names displayed in the product bar.
Sets the icon used to indicate expandable product details in the compact view.
Controls whether additional padding is applied to the first product image in the list.
Configures the text style specifically for price displays in the product bar.
Defines the color used to highlight discounted prices in the product bar.

Powered By¶

PowerBarTheme {
  strings {
    poweredByAiuta: String // (1)!
  }

  colors {
    aiuta: PowerBarColorScheme // (2)!
  }
}

enum PowerBarColorScheme {
  standard // (3)!
  primary // (4)!
}

Defines the text label for the "Powered By Aiuta" branding element in the interface.
Controls the color scheme used to highlight "Aiuta" in the poweredByAiuta label.
Uses the default Aiuta-brand color to highlight "Aiuta" in the poweredByAiuta label, which is #FF4000FF
Applies the primary color to the entire label without highlighting "Aiuta".