Smooth Hover

A Flutter package that provides beautiful, physics-based hover effects and tooltips for your widgets. It creates smooth, animated hover states with customizable ink effects and tooltips.

Example

Features

  • 🎨 Smooth, physics-based hover animations
  • 💫 Customizable ink effects with decorations
  • 🎯 Smart tooltips with configurable delays and styles
  • 🔄 Built-in focus and press state handling
  • 🎮 Customizable mouse cursor behavior
  • ⚡ Efficient hover state management

Installation

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

dependencies:
  smooth_hover: ^0.0.1

Usage

  1. Wrap your app or a section of your UI with SmoothHoverScope:
SmoothHoverScope(
  child: YourWidget(),
)
  1. Use SmoothHover to add hover effects to any widget:
SmoothHover(
  inkDecoration: BoxDecoration(
    color: Colors.grey.withOpacity(0.1),
    borderRadius: BorderRadius.circular(16.0),
  ),
  tooltipText: 'Hello World',
  child: YourWidget(),
)

Example

Here's a simple example showing how to create a hoverable container with a tooltip:

SmoothHover(
  inkDecoration: BoxDecoration(
    color: const Color.fromARGB(124, 227, 227, 227),
    borderRadius: BorderRadius.circular(16.0),
  ),
  tooltipText: 'Hello World',
  child: Container(
    width: 300,
    height: 80,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(16.0),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.1),
          blurRadius: 8,
          blurStyle: BlurStyle.outer,
        ),
      ],
    ),
    child: Center(
      child: Text('Hover me!'),
    ),
  ),
)

Customization

Ink Effect

Customize the hover ink effect using the inkDecoration and inkPhysics parameters:

SmoothHover(
  inkDecoration: BoxDecoration(
    color: Colors.blue.withOpacity(0.1),
    borderRadius: BorderRadius.circular(8),
  ),
  inkPhysics: Physics(
    // Custom physics parameters
  ),
  child: YourWidget(),
)

Tooltip

Configure tooltip appearance and behavior:

SmoothHover(
  tooltipText: 'Custom tooltip',
  tooltipDelay: Duration(milliseconds: 500),
  tooltipDecoration: BoxDecoration(
    color: Colors.black87,
    borderRadius: BorderRadius.circular(4),
  ),
  child: YourWidget(),
)

License

This project is licensed under the MIT License - see the LICENSE file for details.

Libraries

smooth_hover