https://github.com/master-wayne7/macos_dock
https://github.com/master-wayne7/macos_dock
Last synced: 12 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/master-wayne7/macos_dock
- Owner: master-wayne7
- License: mit
- Created: 2025-02-27T12:43:32.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-03T05:26:06.000Z (over 1 year ago)
- Last Synced: 2025-10-22T23:53:58.732Z (9 months ago)
- Language: C++
- Size: 6.88 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Authors: AUTHORS
Awesome Lists containing this project
README
# 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](https://master-wayne7.github.io/macos_dock/)
## 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:
```yaml
dependencies:
macos_dock: ^1.0.4
```
## Usage
```dart
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:
```dart
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.