dock_bounce_icon

A Flutter package inspired by the bouncing behavior of macOS Dock icons. This package provides customizable bounce animation widgets with optional sound effects, perfect for creating engaging and interactive icon-based UIs.

📺 Demo

Tap to see it in action:

👉 Watch Demo Video

✨ Features

  • Smooth bounce animation on icon tap
  • Optional sound effects with each bounce
  • Supports bounce sequence customization: height, count, interval, curve
  • Prebuilt BottomNavigationBar alternative with bounce effects
  • Easily integrates into any Flutter app

📦 Installation

Add the following to your pubspec.yaml:

dependencies:
  dock_bounce_icon: ^0.0.1-beta.4

Then run:

flutter pub get

🛠️ Usage

1. Basic Bounce Icon

import 'package:dock_bounce_icon/dock_bounce.dart';
import 'package:flutter/material.dart';

  Center(
        child: DockBounceIcon(
          bounceHeight: 40,
          duration: const Duration(milliseconds: 600),
          soundAsset: 'sounds/heartbeat.mp3',
          bounceCount: 12,
          onBounceStart: () => debugPrint("Bounce started"),
          onBounceEnd: () => debugPrint("Bounce ended"),
          onTap: () => debugPrint("Icon tapped"),
          child: const Icon(
            Icons.favorite,
            color: Colors.red,
            size: 40,
          ),
        ),
      ),

2. Dock-Style Bottom Navigation Bar

DockBounceNavigationBar(
  bounceCount: 3,
  bounceHeight: 40,
  bottomNavigationBarElevation: 0,
  iconPadding: const EdgeInsets.only(bottom: 25),
  items: [
    DockBounceNavigationItem(
      icon: Icon(Icons.home, size: 50, color: Colors.blue),
      soundAsset: 'sounds/home.wav',
      page: Center(child: Text('Home Page')),
    ),
    DockBounceNavigationItem(
      icon: Icon(Icons.settings, size: 50, color: Colors.green),
      soundAsset: 'sounds/settings.wav',
      page: Center(child: Text('Settings Page')),
    ),
    DockBounceNavigationItem(
      icon: Icon(Icons.person, size: 50, color: Colors.purple),
      soundAsset: 'assets/sounds/heartbeat.mp3',
      page: Center(
        child: DockBounceIcon(
          bounceHeight: 40,
          bounceCount: 12,
          soundAsset: sounds/heartbeat.mp3',
          child: Icon(Icons.favorite, size: 40, color: Colors.red),
        ),
      ),
    ),
  ],
)

🎛️ API Reference

DockBounceIcon

Property Type Description
child Widget The icon or widget to animate.
bounceHeight double Maximum bounce height.
duration Duration Time it takes to complete one bounce.
bounceCount int How many times the bounce repeats.
bounceInterval Duration Delay between bounces in a sequence.
bounceOutCurve Curve Curve used when bouncing down.
soundAsset String? Optional sound asset to play during bounce.
audioPlayer AudioPlayer? Optional custom audio player instance.
onTap VoidCallback? Callback for tap event.
onBounceStart VoidCallback? Called when bounce starts.
onBounceEnd VoidCallback? Called when bounce ends.
enableQueue bool If false, disables bounce while one is running.

DockBounceNavigationBar

A bottom navigation bar built with bouncing icon behavior.

Property Type Description
items List<DockBounceNavigationItem> Navigation items with bounce + page.
bounceCount int Number of bounces on item tap.
bounceHeight double Bounce height.
bounceDuration Duration Duration of each bounce.
bounceInterval Duration Interval between bounce repetitions.
bounceOutCurve Curve Curve for bounce return.
bottomNavigationBarElevation double Elevation of nav bar.
bottomNavigationBarColor Color Background color of nav bar.
iconPadding EdgeInsets Padding for icons.

📁 Assets

Ensure your sound files are added in your pubspec.yaml:

flutter:
  assets:
    - assets/sounds/heartbeat.mp3
    - assets/sounds/home.wav
    - assets/sounds/settings.wav

💡 Inspiration

This package is inspired by the interactive bouncing behavior of icons in the macOS Dock, which gives users a playful, responsive visual cue. The goal is to bring similar joy and feedback into mobile applications built with Flutter.

🚧 Roadmap

  • Add bounce direction options (e.g., left/right)
  • Support Lottie animations alongside bounce
  • Dark mode styles for default nav bar

📄 License

MIT License

🔗 Links

Libraries

dock_bounce
dock_bounce_icon
dock_bounce_navigation_bar