macos_dock

A Flutter widget that recreates the macOS dock effect with smooth animations and customizable parameters.

Live Example

Check out the live demo: MacOS Dock Demo

Features

  • 🔄 Smooth scaling animation on hover
  • ⬆️ Upward translation effect
  • 🎯 Neighboring icons scale effect
  • 🎨 Highly customizable parameters
  • 🖼️ Support for any widget as dock items
  • ↕️ Dynamic height adjustment
  • 🎬 Customizable animation duration
  • 🔄 Drag and drop reordering support

Platform Support

  • ✅ Web
  • ✅ Windows
  • ✅ Linux
  • ✅ macOS

Installation

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

dependencies:
  macos_dock: ^1.0.4

Usage

MacosDock(
  iconSize: 50,
  scaleFactor: 1.5,
  translateFactor: 1.0,
  enableReordering: true, // Enable drag and drop reordering
  onReorder: (oldIndex, newIndex) {
    // Handle reordering here
  },
  children: (scale) => [
    Image.asset('assets/finder.png'),
    Image.asset('assets/safari.png'),
    Image.asset('assets/messages.png'),
  ],
)

Customization

The dock can be customized with several parameters:

MacosDock(
  iconSize: 50,              // Base size of icons
  iconSpacing: 8,           // Space between icons
  scaleFactor: 1.5,         // How much icons scale up
  translateFactor: 1.0,     // How much icons move up
  radiusFactor: 1.0,        // Spread of the hover effect
  defaultMaxScale: 2.5,     // Maximum scale factor
  defaultMaxTranslate: -30, // Maximum upward translation
  animationDuration: const Duration(milliseconds: 200),
  enableReordering: false,  // Enable/disable drag and drop reordering
  onReorder: (oldIndex, newIndex) {
    // Handle reordering of items
  },
  children: (scale) => [
    // Your dock items here
  ],
)

Additional Parameters

  • iconSize: Base size of the icons (default: 40)
  • iconSpacing: Space between icons (default: 8)
  • scaleFactor: Controls the magnitude of the scaling effect (default: 1)
  • translateFactor: Controls the magnitude of the upward translation (default: 1)
  • radiusFactor: Controls how far the scaling effect spreads to neighboring icons (default: 1)
  • defaultMaxScale: Maximum scale factor for icons (default: 2.5)
  • defaultMaxTranslate: Maximum upward translation in pixels (default: -30)
  • animationDuration: Duration of the scaling/translation animations (default: 200ms)
  • enableReordering: Enable drag and drop reordering of dock items (default: false)
  • onReorder: Callback function when items are reordered (required if enableReordering is true)

Contributing

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

Libraries

macos_dock