Deepyr Documentation

FAB and Speed Dial (vertical)

Click or focus the F button in the corner

Preview

Dart

Fab(
  trigger: Button([text('F')], style: [Button.lg, Button.circle, Button.primary]),
  actions: [
    FabAction(child: Button([text('A')], style: [Button.lg, Button.circle])),
    FabAction(child: Button([text('B')], style: [Button.lg, Button.circle])),
    FabAction(child: Button([text('C')], style: [Button.lg, Button.circle])),
  ],
)

FAB and Speed Dial with SVG icons

Preview

Dart

Fab(
  trigger: Button([Icon('add', style: [Size.w6, Size.h6])], style: [Button.lg, Button.circle, Button.secondary]),
  actions: [
    FabAction(child: Button([Icon('camera_alt', style: [Size.w6, Size.h6])], style: [Button.lg, Button.circle])),
    FabAction(child: Button([Icon('photo_library', style: [Size.w6, Size.h6])], style: [Button.lg, Button.circle])),
    FabAction(child: Button([Icon('mic', style: [Size.w6, Size.h6])], style: [Button.lg, Button.circle])),
  ],
)

FAB and Speed Dial with labels

Text labels for each button

Preview

Label A

Label B

Label C

Dart

Fab(
  trigger: Button([text('F')], style: [Button.lg, Button.circle, Button.success]),
  actions: [
    FabAction(label: text('Label A'), child: Button([text('A')], style: [Button.lg, Button.circle])),
    FabAction(label: text('Label B'), child: Button([text('B')], style: [Button.lg, Button.circle])),
    FabAction(label: text('Label C'), child: Button([text('C')], style: [Button.lg, Button.circle])),
  ],
)

FAB and Speed Dial with rectangle buttons

You can remove the btn-circle class if you want normal buttons

Preview

Dart

Fab(
  trigger: Button([text('F')], style: [Button.lg, Button.circle, Button.success]),
  actions: [
    FabAction(child: Button([text('Button A')], style: [Button.lg])),
    FabAction(child: Button([text('Button B')], style: [Button.lg])),
    FabAction(child: Button([text('Button C')], style: [Button.lg])),
  ],
)

FAB and Speed Dial with labels and fab-close button

When FAB is open the original button gets replaced by a Close Button

Preview

Closeclose

Label A

Label B

Label C

Dart

Fab(
  trigger: Button([text('F')], style: [Button.lg, Button.circle, Button.info]),
  closeAction: FabClose(
    label: text('Close'),
    child: Button([Icon('close')], style: [Button.lg, Button.circle, Button.error]),
  ),
  actions: [
    FabAction(label: text('Label A'), child: Button([text('A')], style: [Button.lg, Button.circle])),
    FabAction(label: text('Label B'), child: Button([text('B')], style: [Button.lg, Button.circle])),
    FabAction(label: text('Label C'), child: Button([text('C')], style: [Button.lg, Button.circle])),
  ],
)

FAB and Speed Dial with labels and fab-main-action Button

When FAB is open the original button gets replaced by a Main Action Button

Preview

Main ActionM

Label A

Label B

Label C

Dart

Fab(
  trigger: Button([text('F')], style: [Button.lg, Button.circle, Button.primary]),
  mainAction: FabMainAction(
    label: text('Main Action'),
    child: Button([text('M')], style: [Button.lg, Button.circle, Button.secondary]),
  ),
  actions: [
    FabAction(label: text('Label A'), child: Button([text('A')], style: [Button.lg, Button.circle])),
    FabAction(label: text('Label B'), child: Button([text('B')], style: [Button.lg, Button.circle])),
    FabAction(label: text('Label C'), child: Button([text('C')], style: [Button.lg, Button.circle])),
  ],
)

A single FAB (Floating Action Button)

If you only want one button in the corner of page

Preview

Dart

Fab(
  trigger: Button([text('F')], style: [Button.lg, Button.circle, Button.primary]),
  actions: [],
)

FAB Flower and Speed Dial

fab-flower modifier class will open the button in a quarter circle instead of a vertical. fab-flower can fit 1 to 4 buttons, not including the original button, the fab-close button or the fab-main-action button.

Preview

M

Dart

Fab(
  style: [Fab.flower],
  trigger: Button([text('F')], style: [Button.lg, Button.circle, Button.success]),
  mainAction: FabMainAction(child: Button([text('M')], style: [Button.lg, Button.circle])),
  actions: [
    FabAction(child: Button([text('A')], style: [Button.lg, Button.circle])),
    FabAction(child: Button([text('B')], style: [Button.lg, Button.circle])),
    FabAction(child: Button([text('C')], style: [Button.lg, Button.circle])),
    FabAction(child: Button([text('D')], style: [Button.lg, Button.circle])),
  ],
)

FAB and Flower Speed Dial with SVG icons

Preview

edit

Dart

Fab(
  style: [Fab.flower],
  trigger: Button([Icon('add', style: [Size.w6, Size.h6])], style: [Button.lg, Button.circle]),
  mainAction: FabMainAction(
    child: Button([Icon('edit', style: [Size.w6, Size.h6])], style: [Button.lg, Button.circle, Button.primary]),
  ),
  actions: [
    FabAction(child: Button([Icon('camera_alt', style: [Size.w6, Size.h6])], style: [Button.lg, Button.circle])),
    FabAction(child: Button([Icon('poll', style: [Size.w6, Size.h6])], style: [Button.lg, Button.circle])),
    FabAction(child: Button([Icon('photo_library', style: [Size.w6, Size.h6])], style: [Button.lg, Button.circle])),
    FabAction(child: Button([Icon('mic', style: [Size.w6, Size.h6])], style: [Button.lg, Button.circle])),
  ],
)

FAB and Flower Speed Dial with tooltip

There's no space for a text label in a quarter circle, so tooltips are used to indicate the button's function

Preview

M

Dart

Fab(
  style: [Fab.flower],
  trigger: Button([text('F')], style: [Button.lg, Button.circle, Button.info]),
  mainAction: FabMainAction(child: Button([text('M')], style: [Button.lg, Button.circle, Button.success])),
  actions: [
    // Wrap each action's child in a Tooltip
    FabAction(
      child: Tooltip(
        [Button([text('A')], style: [Button.lg, Button.circle])],
        tip: 'Label A',
        style: [Tooltip.left],
      ),
    ),
    FabAction(
      child: Tooltip(
        [Button([text('B')], style: [Button.lg, Button.circle])],
        tip: 'Label B',
        style: [Tooltip.left],
      ),
    ),
    FabAction(
      child: Tooltip(
        [Button([text('C')], style: [Button.lg, Button.circle])],
        tip: 'Label C',
      ),
    ),
    FabAction(
      child: Tooltip(
        [Button([text('D')], style: [Button.lg, Button.circle])],
        tip: 'Label D',
      ),
    ),
  ],
)

FAB / Speed Dial

FAB and Speed Dial (vertical)

FAB and Speed Dial with SVG icons

FAB and Speed Dial with labels

FAB and Speed Dial with rectangle buttons

FAB and Speed Dial with labels and fab-close button

FAB and Speed Dial with labels and fab-main-action Button

A single FAB (Floating Action Button)

FAB Flower and Speed Dial

FAB and Flower Speed Dial with SVG icons

FAB and Flower Speed Dial with tooltip