flutter_speed_dial

You can add labels to the SpeedDial to mimic an Extended FloatingActionButton.

• Main Label: Use the label property to specify a widget for the main button. Use activeLabel to specify a different widget when the dial is open. You can customize the transition using labelTransitionBuilder (defaults to a fade transition).
• Child Labels: Each child button can have a label (a String) which is styled via labelStyle. Alternatively, you can use labelWidget to provide a custom widget for the child's label.

If the label parameter is not provided, no label will be rendered.

When adding children to a SpeedDial, you can choose from three types of content. The package handles animations automatically based on the type you provide. They are processed in the following priority:

1. Animated Icon: Uses the animatedIcon property.

   • animatedIcon: Takes an AnimatedIconData widget.
   • animatedIconTheme: Takes IconThemeData.

2. Widget: Uses the child and activeChild properties.

   • child: The default widget shown when the dial is closed.
   • activeChild: The widget shown when the dial is open (optional).

3. IconData: Uses the icon, activeIcon, and iconTheme properties.

   • icon: The IconData shown when the dial is closed.
   • activeIcon: The IconData shown when the dial is open (optional).
   • iconTheme: IconThemeData to control color and size.

The SpeedDial widget is designed to be used in place of a standard FloatingActionButton. The most common implementation is to pass it to the floatingActionButton argument of a Scaffold.

You can control its position using the Scaffold.floatingActionButtonLocation property. Additionally, SpeedDial can be used within a Scaffold.bottomNavigationBar or a Snackbar.

Scaffold(
  floatingActionButton: SpeedDial(
    // ... configuration
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
)

To run the sample project provided in the repository, follow these steps in your terminal:

1. Fetch dependencies for the root project.
2. Navigate to the example directory.
3. Ensure the example directory is initialized as a Flutter project.
4. Run the application using flutter run -v or via your IDE's debug icon.

flutter pub get;
cd example;
flutter create ./
# Then run using:
flutter run -v

To programmatically control whether the SpeedDial is open or closed, use the openCloseDial property with a ValueNotifier<bool>.

1. Create a ValueNotifier<bool>.
2. Pass it to the openCloseDial parameter of the SpeedDial.
3. Update the .value of the notifier to toggle the state.

// 1. Create the notifier
ValueNotifier<bool> isDialOpen = ValueNotifier(false);

// 2. Assign to SpeedDial
SpeedDial(
  openCloseDial: isDialOpen,
  // ... other properties
);

// 3. Control the state
isDialOpen.value = true; // Opens the dial
isDialOpen.value = false; // Closes the dial

The SpeedDial widget renders a Material Design Speed Dial menu. It consists of a main Floating Action Button (FAB) that, when pressed, expands to reveal a list of SpeedDialChild buttons. You can customize the appearance, animation, direction, and behavior of both the main button and its children.

SpeedDial(
  icon: Icons.add,
  activeIcon: Icons.close,
  children: [
    SpeedDialChild(
      child: Icon(Icons.share),
      onTap: () => print('Share tapped'),
    ),
    SpeedDialChild(
      child: Icon(Icons.copy),
      onTap: () => print('Copy tapped'),
    ),
  ],
);

Use the following properties to control the layout and spacing of the SpeedDial and its children:

• spacing: The space between the main SpeedDial button and its children.
• spaceBetweenChildren: The space between each individual child element.
• childPadding: Adjusts the padding of the children's buttons to control their size.
• childMargin: Adjusts the margin between the children's buttons and their labels.

The children of the SpeedDial are defined via a list of SpeedDialChild objects. You can control the layout and spacing of these children using SpeedDial properties:

• childrenButtonSize: The Size for all child buttons.
• spacing: Adds space between the main SpeedDial button and the children.
• spaceBetweenChildren: Adds space between each individual child button.
• childMargin: The margin applied to each child.
• childPadding: The padding applied to each child.
• direction: The direction in which children appear (SpeedDialDirection.up, .down, .left, or .right).

You can customize the main button of the SpeedDial using several properties:

• icon: The default icon shown on the button.
• activeIcon: The icon shown when the dial is open.
• animatedIcon: An AnimatedIconData that animates between states (overrides icon and activeIcon).
• label: A widget to display as a label on the main button.
• activeLabel: A widget to display as a label when the dial is open.
• backgroundColor / foregroundColor: Colors for the button in its default state.
• activeBackgroundColor / activeForegroundColor: Colors for the button when the dial is open.
• gradient: A Gradient decoration for the button.
• buttonSize: The Size of the main button (defaults to Size(56.0, 56.0)).
• mini: If true, uses a mini FAB style.
• child / activeChild: Custom widgets to use instead of icons.

You can programmatically open or close the SpeedDial by providing a ValueNotifier<bool> to the openCloseDial property. Updating the notifier's value will trigger the dial to toggle.

final ValueNotifier<bool> _dialNotifier = ValueNotifier(false);

// In your widget tree:
SpeedDial(
  openCloseDial: _dialNotifier,
  // ... other properties
)

// To open the dial:
_dialNotifier.value = true;

Use these callbacks to respond to the state changes of the dial:

• onOpen: Called when the dial is opened.
• onClose: Called when the dial is closed.
• onPress: If provided, the dial will only open on a long press instead of a normal tap.
• onOpenBuilder: An AsyncChildrenBuilder used to dynamically populate children just before the dial opens. If you use this, you should provide a non-const children list (e.g. children: []) to the SpeedDial constructor.