Flutter Mac Dock

A macOS-style dock widget for Flutter with smooth magnification on hover, glassmorphism background, and animated tooltips.

Flutter Mac Dock Demo

🌐 Live Demo

Zero external dependencies — only requires the Flutter SDK.

Features

🔍 Cosine-based magnification — Icons smoothly scale as the cursor approaches, just like the macOS dock
🪟 Glassmorphism background — Blurred, translucent container with configurable opacity
💬 Animated tooltips — Labels appear above hovered items with a frosted-glass effect
🍎 Pixel-perfect Apple squircle — Uses Flutter's native RoundedSuperellipseBorder for icon clipping that matches the exact macOS/iOS icon shape
🎨 Fully customizable — Control icon size, magnification intensity, range, colors, and more via DockStyle
➗ Dividers — Optional separators between item groups
⚡ Zero dependencies — Pure Flutter, no external packages required
📱 Framework-agnostic — Works with Provider, Riverpod, Bloc, or plain setState

Installation

Add this to your pubspec.yaml:

dependencies:
  flutter_mac_dock: ^0.1.0

Then run:

flutter pub get

Quick Start

The icon property accepts any Widget — use Icon, Image.asset, Image.network, or any custom widget:

import 'package:flutter_mac_dock/flutter_mac_dock.dart';

// Using Material Icons for a quick prototype
MacDock(
  items: [
    DockItem(
      label: 'Finder',
      icon: Icon(Icons.folder, color: Colors.blue),
      onTap: () => print('Finder tapped'),
    ),
    DockItem(
      label: 'Safari',
      icon: Icon(Icons.language, color: Colors.blue),
      onTap: () => print('Safari tapped'),
    ),
    DockItem(
      label: 'Mail',
      icon: Icon(Icons.mail, color: Colors.blue),
      onTap: () => print('Mail tapped'),
    ),
  ],
)

Using Image Assets

For a more authentic macOS look, pass image assets as the icon widget:

MacDock(
  items: [
    DockItem(
      label: 'Finder',
      icon: Image.asset('assets/finder.webp', fit: BoxFit.cover),
    ),
    DockItem(
      label: 'Chrome',
      icon: Image.asset('assets/chrome.png', fit: BoxFit.cover),
    ),
    DockItem(
      label: 'Notes',
      icon: Image.asset('assets/notes.png', fit: BoxFit.cover),
    ),
    DockItem(
      label: 'Settings',
      icon: Image.asset('assets/settings.png', fit: BoxFit.cover),
    ),
  ],
  dividerIndices: [2],  // Divider after the 3rd item
)

Tip: Images are automatically clipped to Apple's superellipse shape — no need for ClipRRect or manual rounding. Use BoxFit.cover for best results.

Customization

Use DockStyle to control the appearance:

MacDock(
  items: myItems,
  dividerIndices: [3],  // Divider after the 4th item
  style: DockStyle(
    iconSize: 56,              // Base icon size
    magnification: 0.5,        // Max magnification (50% growth)
    range: 180,                // Hover influence range in pixels
    backgroundColor: Colors.black.withOpacity(0.3),
    borderRadius: 24,
    blurSigma: 20,
    showIndicator: true,       // Selection dot below items
    indicatorColor: Colors.white,
  ),
  onItemHover: (index) {
    // React to hover changes (e.g., update a preview)
  },
)

API Reference

`MacDock`

Property	Type	Default	Description
`items`	`List<DockItem>`	required	The dock items to display
`style`	`DockStyle`	`DockStyle()`	Visual configuration
`dividerIndices`	`List<int>`	`[]`	Indices after which to place dividers
`onItemHover`	`ValueChanged<int?>?`	`null`	Hover change callback

`DockItem`

Property	Type	Default	Description
`label`	`String`	required	Tooltip text
`icon`	`Widget`	required	The icon widget to render
`onTap`	`VoidCallback?`	`null`	Tap callback
`isSelected`	`bool`	`false`	Shows selection indicator

`DockStyle`

Property	Type	Default	Description
`iconSize`	`double`	`48.0`	Base icon size
`magnification`	`double`	`0.8`	Max magnification factor
`range`	`double`	`150.0`	Hover influence distance
`backgroundColor`	`Color`	White 15%	Dock background color
`borderRadius`	`double`	`20.0`	Container border radius
`blurSigma`	`double`	`15.0`	Glassmorphism blur intensity
`showIndicator`	`bool`	`true`	Show selection dot
`indicatorColor`	`Color`	`Colors.black87`	Selection dot color

How It Works

The magnification algorithm uses a cosine curve to calculate the scale factor for each item based on its distance from the cursor:

scale = 1.0 + magnification × cos(distance / range × π/2)

This produces a smooth bell-curve falloff where the item directly under the cursor is maximally scaled, and the effect gradually diminishes to 1.0 at the edge of the range.

Icons are clipped using Flutter's native RoundedSuperellipseBorder, which renders the exact Apple superellipse shape (the same as SwiftUI's .continuous corner style) with GPU acceleration. This ensures pixel-perfect icon corners that scale smoothly during magnification.

Requirements

Flutter ≥ 3.32.0 (for RoundedSuperellipseBorder support)
Dart ≥ 3.6.0

License

MIT License — see LICENSE for details.

Author

Luis Portal — Portfolio · LinkedIn · GitHub