macos_dock 1.0.4

A Flutter widget that recreates the macOS dock with smooth scaling animations, hover effects, and customizable parameters for a native-like experience.

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.