The DLButtonDock is a customizable component designed to display one or more buttons visible on screen at all times. This allows users to quickly decide and act at any moment without having to scroll to the very end of a page.

1. Reference

This component inherits props from the Button Dock.

Prop

Type

Default

type

.singleButton

.doubleHorizontalButtons

.doubleVerticalButtons

.singleButton

firstButtonTitle

"text"

secondButtonTitle

"text"

firstButtonAction

secondButtonAction

2. Type

You can edit the count with the .1 or .2 parameter.

Button
Button
Button
DLButtonDock(
type: .singleButton
(firstButtonTitle: "Button"),
firstButtonAction:  {
/// - Save Action
})

DLButtonDock(
type: .doubleVerticalButtons
(firstButtonTitle: "Button",
secondButtonTitle: "Button")) {
/// - Action
} secondButtonAction: {
/// - Action
}

3. Direction

You can edit the direction with the .vertical or .horizontal parameter.

Button
Button
Button
Button
DLButtonDock(
type: .doubleHorizontalButtons
(firstButtonTitle: "Button",
secondButtonTitle: "Button")) {
/// - Action
} secondButtonAction: {
/// - Action
}

DLButtonDock(
type: .doubleVerticalButtons
(firstButtonTitle: "Button",
secondButtonTitle: "Button")) {
/// - Action
} secondButtonAction: {
/// - Action
}

Preview

Code

Button

DlButtonDock(
  buttons: [
    DlButton(
      label: 'Button',
      type: DlButtonType.primary,
      onPressed: () {},
    ),
  ],
  showSeparator: true,
)

Copy

Usage

Add this code example to your project to see how the component works.

DlButtonDock(
  buttons: [
    DlButton(
      label: 'Primary',
      type: DlButtonType.primary,
      onPressed: () {},
    ),
    DlButton(
      label: 'Secondary',
      type: DlButtonType.secondary,
      onPressed: () {},
    ),
  ],
  direction: Axis.horizontal,
  showSeparator: true,
)

Copy

API Reference

DlButtonDock is a full-width container that arranges a custom list of DlButton items horizontally or vertically with fixed p_16 spacing and an optional top separator.

Prop

Type

Default

buttons

List<DlButton>

direction

horizontal

vertical

horizontal

showSeparator

bool

true

Examples

Variants

Preview

Code

Primary

Secondary

DlButtonDock(
  buttons: [
    DlButton(
      label: 'Primary',
      type: DlButtonType.primary,
      onPressed: () {},
    ),
    DlButton(
      label: 'Secondary',
      type: DlButtonType.secondary,
      onPressed: () {},
    ),
  ],
  direction: Axis.horizontal,
  showSeparator: true,
)

Copy

Direction

Preview

Code

Secondary

Primary

DlButtonDock(
  buttons: [
    DlButton(
      label: 'Secondary',
      type: DlButtonType.secondary,
      onPressed: () {},
    ),
    DlButton(
      label: 'Primary',
      type: DlButtonType.primary,
      onPressed: () {},
    ),
  ],
  direction: Axis.vertical,
  showSeparator: true,
)

Copy

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version