DOCSEARCHbyAlgolia
Submit Docs

Bruno Flutter Component Library

repository·3.x·Indexed 25 days ago

https://github.com/lianjiatech/bruno

An enterprise-grade mobile component library for Flutter providing high-quality, ready-to-use components with consistent interaction and visual styles. It includes specialized widgets such as BrnAbnormalStateWidget for empty or error states and BrnCommonActionSheet for bottom-sheet lists, along with support for theme customization via BrnInitializer.

Tokens
113.5K
Snippets
227
Records
474
Agent score
83%

What's inside Bruno

  1. Overview of BrnSelectionView

    3.x

    BrnSelectionView is a component used for data filtering. It supports various filtering patterns including:

    • List-based filtering: Single-list, double-list, or triple-list selection.
    • Tag-based filtering: No-tab or multi-tab layouts.
    • Time-based filtering: Specific time point selection or time range selection.

    Related components include BrnFlatSelectionWidget and BrnSimpleSelection.

  2. Use BrnSelectTag for selectable tags

    3.x

    BrnSelectTag is a tag component that supports both flow (wrapping) and horizontal scrolling layouts. It can be configured for single-selection or multi-selection modes, with support for fixed or adaptive tag widths.

    Key Features:

    • Layouts: Flow layout (wrapping) or horizontal scrolling.
    • Width Modes: Fixed width tags or adaptive width tags.
    • Selection Modes: Single-select or multi-select.
    • Customization: Adjustable spacing (horizontal and vertical), text styles, and background colors.

  3. Use BrnCommonActionSheet for bottom sheet lists

    3.x

    The BrnCommonActionSheet is a versatile component for creating bottom-sheet lists. It supports custom titles, customizable item text (main title and description), and various item styles including 'alert' (red text) and 'link' (blue text).

    Key features:

    • Custom 'Cancel' button text.
    • Custom click callbacks for each item.
    • Ability to intercept click events to prevent the sheet from closing or to perform custom logic.
    • Support for custom text styles per item (overriding default styles).
    • Configurable maximum lines for the list title and maximum height for the sheet.

  5. Use BrnSearchText for search input

    3.x

    The BrnSearchText component is a versatile search input field designed for various UI scenarios, such as search bars in Appbars, top-of-page search areas, or inline search fields.

    Key Features:

    • Clear Button: Automatically shows a clear icon when text is present; clicking it clears the input.
    • Action Area: Supports a custom right-side action widget.
    • Focus Management: Handles focus states and provides callbacks for text changes and commits.

  8. Use the BrnAppraise component

    3.x

    BrnAppraise is a rating component that supports star ratings or emoji ratings, along with tags and text input. It can be used within pages or inside popups/dialogs.

    Rating Styles

    • Star Rating (BrnAppraiseType.Star): Defaults to 5 stars. You can customize the number of stars and the descriptive text for each level.
    • Emoji Rating (BrnAppraiseType.Emoji): Defaults to 5 emojis. You can customize the text for each emoji and choose a subset of emojis to display using indexes.

    Key Features

    • Header: Supports two styles: spaceBetween (title and close icon on opposite sides, ideal for popups) and center (centered title, ideal for pages). The header can be hidden.
    • Tags: Supports single or multiple selection. If tags is null or empty, the tag section is hidden.
    • Text Input: Supports setting maximum length and maximum height. Can be hidden.
    • Submit Button: Can be customized or hidden. When hidden, you must use callbacks in config to capture state changes.