A Flutter package to render a Material Design Speed Dial.

Overview

If you’re working with Flutter and want a visually appealing and functional way to incorporate floating action buttons, look no further! The Flutter Speed Dial package offers a dynamic, flexible solution that can enhance your app’s user interface significantly. Let’s dive into how to get started with this exciting library.

Usage

The SpeedDial widget is built to be integrated into the Scaffold, specifically replacing the FloatingActionButton widget. You can set its position using the Scaffold’s floatingActionButtonLocation argument, and it can even be used with Scaffold.bottomNavigationBar and Snackbar.

Null Safety

Version **3.0.5** includes null safety features, meaning it’s compatible with both null safe and non-null safe code. This makes it easier for developers to use it in various projects.

Configuring Labels

The SpeedDial can take any widget as a label. If a label is provided, it utilizes the Extended FloatingActionButton property. Additionally, the activeLabel property allows you to specify which label appears when the SpeedDial is open. You can also customize the label appearance using the labelStyle parameter, allowing for a tailored user experience.

Types of Child for SpeedDial

• Animated Icon: Uses the animatedIcon property for animations.
• Widget: You can define child widgets using the child and activeChild parameters to specify what shows when the dial is open or closed.
• IconData: Customizes icons with the icon and activeIcon properties, allowing for distinct icons based on the state of the dial.

Handle Spacing

The SpeedDial offers various properties to effectively manage spacing, such as:

• spacing: Controls space between the Speed Dial and its children.
• spaceBetweenChildren: Adjusts space between child elements.
• childPadding: Modifies the padding of children buttons.
• childMargin: Adjusts margin between buttons and their labels.

Closing on Back Button Press

The SpeedDial can automatically close when the back button is pressed if it’s open. You can control this behavior using the closeDialOnPop property.

Open/Close Dial Property

To implement functionality for opening and closing the SpeedDial, you can use a ValueNotifier:

• Create a ValueNotifier: ValueNotifier isDialOpen = ValueNotifier(false);
• Set the openCloseDial property in your SpeedDial: openCloseDial: isDialOpen
• Change the state to open or close the dial: isDialOpen.value = false; // or true;

Example Usage

For a detailed implementation, refer to the provided Example Code.

Troubleshooting

Having a hiccup with your Speed Dial implementation? Here are some ideas to help you resolve issues:

• Ensure that the version you’re using is compatible. Check for updates in your dependency file.
• Double-check your positioning parameters in the Scaffold to make sure they’re set correctly.
• If you encounter issues with animations, ensure you’ve defined all necessary animated properties.

If problems persist, feel free to file an issue on GitHub. For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Support Development

Supporting the development of this library is crucial! You can aid through code contributions or monetary donations. Your contributions will be acknowledged in the README section.

To donate directly, check out Buy Me A Coffee or consider becoming a GitHub sponsor.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.