Enhanced Speed Dial #

A highly customizable Flutter package that provides an elegant speed dial floating action button with advanced blur background effects, flexible positioning, multiple direction layouts, and comprehensive styling options.

📸 Screenshots #

Screenshot 1	Screenshot 2	Screenshot 3

✨ Features #

• 🎨 Fully Customizable: Complete control over colors, icons, animations, and styling
• 🌟 Full-Screen Blur: Backdrop blur effect that covers the entire screen using overlay
• ✨ Smooth Animations: Fluid icon rotation and option animations with custom curves
• 📍 Flexible Positioning: Position speed dial anywhere on screen
• 🧭 Multiple Directions: Options can expand up, down, left, or right
• 🎯 Individual Option Styling: Each option can have unique styling
• 📱 Safe Area Support: Proper positioning respecting device safe areas
• ♿ Accessibility: Built-in tooltip and semantic support
• 🔧 Easy Integration: Simple API with sensible defaults

🌟 Full-Screen Blur Background #

When showBlurBackground is enabled, the Enhanced Speed Dial creates a full-screen overlay that:

• ✅ Covers the entire screen regardless of where the speed dial is positioned
• ✅ Preserves option interactivity by rendering them above the blur
• ✅ Supports tap-to-close functionality on the blurred background
• ✅ Works seamlessly as a floatingActionButton in Scaffold

📦 Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  enhanced_speed_dial: ^1.0.0

Then run:

flutter pub get

🚀 Quick Start #

Simple Example (Recommended) #

import 'package:flutter/material.dart';
import 'package:enhanced_speed_dial/enhanced_speed_dial.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Enhanced Speed Dial Example')),
      body: Center(child: Text('Hello World!')),
      floatingActionButton: EnhancedSpeedDial.simple(
        mainIcon: Icons.add,
        options: [
          SpeedDialOption.simple(
            label: 'Create Note',
            icon: Icons.note_add,
            onTap: () => print('Create Note tapped'),
          ),
          SpeedDialOption.simple(
            label: 'Add Photo',
            icon: Icons.photo_camera,
            onTap: () => print('Add Photo tapped'),
          ),
          SpeedDialOption.simple(
            label: 'Record Voice',
            icon: Icons.mic,
            onTap: () => print('Record Voice tapped'),
          ),
        ],
      ),
    );
  }
}

Basic Example with Full Configuration #

import 'package:flutter/material.dart';
import 'package:enhanced_speed_dial/enhanced_speed_dial.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Enhanced Speed Dial Example')),
      body: Center(child: Text('Hello World!')),
      floatingActionButton: EnhancedSpeedDial(
        mainIcon: Icons.add,
        options: [
          SpeedDialOption(
            label: 'Create Note',
            icon: Icons.note_add,
            color: Colors.green,
            heroTag: "create_note",
            onTap: () => print('Create Note tapped'),
          ),
          SpeedDialOption(
            label: 'Add Photo',
            icon: Icons.photo_camera,
            color: Colors.orange,
            heroTag: "add_photo",
            onTap: () => print('Add Photo tapped'),
          ),
        ],
      ),
    );
  }
}

🎛️ Advanced Customization #

Corner Positioning #

EnhancedSpeedDial(
  mainIcon: Icons.menu,
  corner: SpeedDialCorner.topLeft, // topLeft, topRight, bottomLeft, bottomRight
  offsetFromEdge: 20.0, // Distance from screen edges
  direction: SpeedDialDirection.down, // up, down, left, right
  options: [...],
)

Animation Customization #

EnhancedSpeedDial(
  mainIcon: Icons.add,
  animationDuration: Duration(milliseconds: 400),
  animationCurve: Curves.elasticOut,
  rotateMainFab: true,
  rotationAngle: 3.14159, // π radians (180 degrees)
  options: [...],
)

Blur Background Effects #

EnhancedSpeedDial(
  mainIcon: Icons.add,
  showBlurBackground: true,
  blurIntensity: 20.0,
  blurOverlayColor: Color.fromRGBO(0, 0, 0, 0.5),
  closeOnBlurTap: true,
  options: [...],
)

Comprehensive Styling #

EnhancedSpeedDial(
  mainIcon: Icons.menu,
  openIcon: Icons.close,
  backgroundColor: Colors.blue,
  foregroundColor: Colors.white,
  elevation: 8.0,
  fabSize: 60.0,
  optionFabSize: 48.0,
  optionSpacing: 12.0,
  mainToOptionSpacing: 16.0,
  labelSpacing: 16.0,
  showLabels: true,
  labelStyle: TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 14,
  ),
  labelDecoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [BoxShadow(blurRadius: 4, color: Colors.black26)],
  ),
  applySafeArea: false, // When using as Scaffold floatingActionButton
  options: [
    SpeedDialOption(
      label: 'Enhanced Action',
      icon: Icons.star,
      color: Colors.purple,
      foregroundColor: Colors.yellow,
      size: 52.0,
      elevation: 6.0,
      heroTag: "enhanced_action",
      tooltip: "Perform enhanced action",
      customLabel: Container(
        padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
        decoration: BoxDecoration(
          color: Colors.purple.withOpacity(0.1),
          border: Border.all(color: Colors.purple),
          borderRadius: BorderRadius.circular(20),
        ),
        child: Text('Custom'),
      ),
      onTap: () => print('Enhanced action'),
    ),
  ],
)

📚 API Reference #

EnhancedSpeedDial Properties #

SpeedDialOption Properties #

Enums #

SpeedDialDirection

enum SpeedDialDirection {
  up,    // Options expand upward
  down,  // Options expand downward
  left,  // Options expand to the left
  right, // Options expand to the right
}

SpeedDialCorner

enum SpeedDialCorner {
  topLeft,     // Top-left corner of screen
  topRight,    // Top-right corner of screen
  bottomLeft,  // Bottom-left corner of screen
  bottomRight, // Bottom-right corner of screen
}

Simple Constructors #

For quick setup with minimal configuration, use the .simple() constructors:

EnhancedSpeedDial.simple()

EnhancedSpeedDial.simple(
  mainIcon: Icons.add,
  options: [...], // List of SpeedDialOption
)

SpeedDialOption.simple()

SpeedDialOption.simple(
  label: 'Action',
  icon: Icons.star,
  onTap: () => print('Tapped'),
)

Both constructors automatically handle color generation, hero tags, and other properties with sensible defaults.

Example App #

See the example directory for a complete sample application demonstrating various features of the Enhanced Speed Dial package.

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

This project is licensed under the MIT License - see the LICENSE file for details.