fl_hover #

A comprehensive Flutter package providing beautiful hover effects and animations for web and desktop applications.

Demo #

Check out the live demo: fl_hover Demo

Successfully Published on pub.flutter-io.cn: 🎉 Your package is now available at pub.flutter-io.cn/packages/fl_hover

Features #

• 🎨 A rich collection of hover effects: Cards, navigation menus, icons, buttons, and more.
• 🎯 Highly Customizable: Easily tweak animations, colors, and properties.
• 🌐 Web & Desktop Ready: Optimized for Flutter web and desktop platforms.
• 📦 Easy to Use: Simple, intuitive API with sensible defaults.

Installation #

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

dependencies:
  fl_hover: ^1.0.0 # Replace with the latest version

Then run: flutter pub get

Available Widgets #

Here is a list of the available widgets in this package:

Cards #

Holographic Card

Creates a stunning holographic appearance with animated gradients and shimmer effects.

Use Cases:

• Product showcase cards for tech items
• Premium feature badges
• Special announcement cards
• Landing page hero cards

Simple Usage:

import 'package:fl_hover/fl_hover.dart';

HolographicCard(
  child: Text('Hover Me'),
)

Advanced Usage with Custom Theme:

HolographicCard(
  theme: HolographicEffectTheme(
    backgroundColor: Color(0xFF111111),
    shineColor: Color(0x4D00FFFF),  // rgba(0, 255, 255, 0.3)
    glowColor: Color(0x8000FFFF),   // rgba(0, 255, 255, 0.5)
    borderRadius: BorderRadius.circular(15),
    padding: EdgeInsets.all(24.0),
    scaleFactor: 1.05,
    animationDuration: Duration(milliseconds: 500),
    shineDuration: Duration(milliseconds: 500),
  ),
  child: Column(
    children: [
      Icon(Icons.star, size: 48, color: Colors.white),
      Text('Premium', style: TextStyle(color: Colors.white)),
    ],
  ),
)

Theme Properties:

Flip Card

A card that flips on hover to reveal content on the back.

Use Cases:

• Playing cards (Poker, Blackjack, Solitaire)
• Flash cards for education
• Credit/Debit card displays
• Business cards with contact info
• Trading cards
• Product comparison cards

Simple Usage:

FlipCard(
  front: Container(child: Text('Front')),
  back: Container(child: Text('Back')),
)

Advanced Usage with Custom Theme:

FlipCard(
  theme: FlipCardTheme(
    borderRadius: BorderRadius.circular(12),
    frontBackgroundColor: Color(0xFFF5F5DC),
    backBackgroundColor: Colors.white,
    padding: EdgeInsets.zero,
    width: 500,
    height: 350,
    animationDuration: Duration(milliseconds: 600),
    animationCurve: Curves.easeInOut,
    perspective: 0.001,
  ),
  front: Container(
    decoration: BoxDecoration(color: Color(0xFFF5F5DC)),
    child: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          FlutterLogo(size: 56),
          Text('FLUTTER', 
            style: TextStyle(
              fontSize: 48,
              fontWeight: FontWeight.bold,
              color: Color(0xFF8B8B7A),
              letterSpacing: 3,
            ),
          ),
        ],
      ),
    ),
  ),
  back: Container(
    decoration: BoxDecoration(color: Colors.white),
    child: Padding(
      padding: EdgeInsets.all(24),
      child: Text(
        'Flutter is Google\'s UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.',
        style: TextStyle(fontSize: 16),
      ),
    ),
  ),
)

Theme Properties:

Card Face

A card with a top face that moves on hover to reveal the content underneath.

Use Cases:

• Product cards with image and details (e-commerce)
• Portfolio items with thumbnail and description
• Blog post preview cards
• Event cards with date and info

Simple Usage:

CardFace(
  topFace: Text('Summary'),
  bottomFace: Text('Details'),
  topFaceDecoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Color(0xFF7F00FF), Color(0xFFE100FF)],
    ),
  ),
)

Advanced Usage with Custom Theme:

CardFace(
  theme: CardFaceTheme(
    width: 300.0,
    height: 400.0,
    borderRadius: BorderRadius.circular(15),
    shrunkenHeight: 60.0,
    shadow: BoxShadow(
      color: Color.fromRGBO(0, 0, 0, 0.5),
      blurRadius: 60,
      spreadRadius: 0,
      offset: Offset(0, 15),
    ),
    animationDuration: Duration(milliseconds: 500),
    animationCurve: Curves.easeInOut,
  ),
  bottomFace: Container(
    color: Colors.white,
    child: Column(
      children: [
        Text('Key Features:',
          style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
        ),
        // ... more content
      ],
    ),
  ),
  topFace: Column(
    children: [
      Expanded(
        child: Image.asset('assets/images/product.jpg', fit: BoxFit.cover),
      ),
      Container(
        padding: EdgeInsets.symmetric(vertical: 8),
        child: Text('\$299.99', 
          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
        ),
      ),
    ],
  ),
  topFaceDecoration: BoxDecoration(color: Colors.white),
)

Theme Properties:

Card Slide

A card where the top image slides up on hover, revealing text content below.

Use Cases:

• Team member cards (photo + bio)
• Product cards (image + specifications)
• Service cards (icon + description)
• Testimonial cards (photo + quote)

Simple Usage:

CardSlide(
  topWidget: Image.network('...'),
  bottomWidget: Column(
    children: [
      Text('Name', style: TextStyle(fontWeight: FontWeight.bold)),
      Text('Role'),
    ],
  ),
)

Advanced Usage with Custom Theme:

CardSlide(
  theme: CardSlideTheme(
    backgroundColor: Colors.white,
    borderRadius: BorderRadius.circular(12),
    cardOffset: 20.0,
    cardWidth: 400.0,
    cardHeight: 250.0,
    coveragePercentage: 0.4,
    animationDuration: Duration(milliseconds: 500),
    animationCurve: Curves.easeOut,
    titleTextStyle: TextStyle(
      fontSize: 24,
      fontWeight: FontWeight.bold,
      color: Color(0xFF414141),
    ),
    subtitleTextStyle: TextStyle(
      fontSize: 16,
      color: Color(0xFF414141),
    ),
  ),
  topWidget: ClipRRect(
    borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
    child: Image.asset('assets/images/profile.jpg', fit: BoxFit.cover),
  ),
  bottomWidget: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('John Doe',
        style: TextStyle(
          fontSize: 24,
          fontWeight: FontWeight.bold,
          color: Color(0xFF414141),
        ),
      ),
      SizedBox(height: 10),
      Text('Senior Developer',
        style: TextStyle(fontSize: 16, color: Color(0xFF414141)),
      ),
    ],
  ),
)

Theme Properties:

Card Hover

A card with a hover effect that includes a category, title, author, and time.

Use Cases:

• Recipe cards (photo + ingredients + cooking time)
• Blog post cards (image + title + author + read time)
• News article cards
• Event cards (image + event details + date/time)
• Portfolio item cards

Simple Usage:

CardHover(
  image: NetworkImage('...'),
  title: 'My Awesome Title',
  category: 'Flutter',
  author: 'John Doe',
  timeText: '5 min read',
)

Theme Properties:

Paper Card Grid

A grid of cards with a paper-like unfolding effect on hover.

Use Cases:

• Tutorial/documentation grid
• Course cards grid
• Project showcase grid
• Feature highlights grid

Simple Usage:

PaperCardGrid(
  items: [
    Text('Card 1'),
    Text('Card 2'),
  ],
  onCardTap: (index) {},
)

Theme Properties:

Glow Card

A card that emits a glow effect from the borders on hover.

Use Cases:

• Premium feature highlights
• Special announcement cards
• Call-to-action cards
• Achievement badges

Simple Usage:

GlowCard(
  child: Text('Glow'),
  onTap: () {},
)

Theme Properties:

Liquid Glass Card

A card with a liquid-like, distorted glass effect on hover.

Use Cases:

• Interactive portfolio cards
• Premium product displays
• Feature showcases
• Game UI elements

Simple Usage:

LiquidGlassCard(
  child: Text('Liquid'),
  onTap: () {},
)

Theme Properties:

Navigation #

Animated Nav Menu

A navigation menu with items that animate with a gradient on hover.

Use Cases:

• Main website navigation
• Mobile app side menu
• Dashboard navigation
• Admin panel menu

Simple Usage:

AnimatedNavMenu(
  items: [
    AnimatedNavMenuItem(icon: Icons.home, title: 'Home', onTap: () {}),
    AnimatedNavMenuItem(icon: Icons.search, title: 'Search', onTap: () {}),
  ],
)

Theme Properties:

Sliding Nav Menu

A navigation menu with a sliding highlight that moves to the hovered item.

Use Cases:

• Tab navigation
• Settings menu
• Dashboard side menu
• Filter menu

Simple Usage:

SlidingNavMenu(
  items: [
    SlidingNavMenuItem(title: 'Home', onTap: () {}),
    SlidingNavMenuItem(title: 'Profile', onTap: () {}),
  ],
)

Theme Properties:

Icons & Buttons #

Animated Fill Icon

A set of icons that fill with color on hover.

Use Cases:

• Social media share buttons
• Action buttons (like, favorite, bookmark)
• Rating icons
• Status indicators

Simple Usage:

AnimatedFillIcon(
  icons: [
    AnimatedFillIconItem(icon: Icons.favorite, hoverColor: Colors.red),
    AnimatedFillIconItem(icon: Icons.star, hoverColor: Colors.yellow),
  ],
)

Theme Properties:

Animated Hover Icons

A set of icons that perform a jump and color change animation on hover.

Use Cases:

• Toolbar icons
• Quick action buttons
• Feature icons
• Category icons

Simple Usage:

AnimatedHoverIcons(
  icons: [
    AnimatedIconItem(icon: Icons.thumb_up, hoverColor: Colors.blue),
    AnimatedIconItem(icon: Icons.comment, hoverColor: Colors.green),
  ],
)

Theme Properties:

Hover Underline

A widget (text or icon) that gets an animated underline on hover.

Use Cases:

• Navigation links
• Read more links
• Clickable text elements
• Icon links

Simple Usage:

HoverUnderline(
  child: Text('Hover Me'),
  onTap: () {},
)

Theme Properties:

Liquid Morph

A button with a liquid morphing effect on hover.

Use Cases:

• Call-to-action buttons
• Submit buttons
• Feature activation buttons
• Game buttons

Simple Usage:

LiquidMorph(
  child: Text('Submit'),
  onTap: () {},
)

Theme Properties:

Animated Arrow Button

A button with an arrow that animates on hover.

Use Cases:

• Continue/Next buttons
• Forward/Backward navigation
• Slide arrows
• Read more buttons

Simple Usage:

AnimatedArrowButton(
  onTap: () {},
)

Theme Properties:

Effects #

Cursor Showcase

An effect that changes the cursor's appearance and adds a trailing highlight effect.

Use Cases:

• Interactive portfolio
• Creative agency websites
• Gaming websites
• Interactive presentations

Simple Usage:

CursorShowcase()

Theme Properties:

Split Image

An image that splits into multiple pieces on hover.

Use Cases:

• Portfolio galleries
• Product galleries
• Team member showcases
• Photo galleries

Simple Usage:

SplitImage(
  image: NetworkImage('...'),
  onTap: () {},
)

Theme Properties:

Widget Extensions #

Increase Size on Hover

An extension method that smoothly increases a widget's size on hover.

Use Cases:

• Interactive icons
• Buttons with size feedback
• Images that need emphasis on hover
• Social media icons

Simple Usage:

Icon(Icons.favorite, size: 80)
  .increaseSizeOnHover(1.5)

Advanced Usage:

Icon(Icons.favorite, size: 80)
  .increaseSizeOnHover(
    1.5,
    duration: Duration(milliseconds: 500),
    curve: Curves.bounceOut,
    alignment: Alignment.center,
    cursor: SystemMouseCursors.zoomIn,
  )

Customizable Properties:

Change Widget on Hover

An extension method that changes a widget to a different widget on hover with a fade transition.

Use Cases:

• Profile images that change on hover
• Before/after product images
• Interactive image galleries
• Icon state changes

Simple Usage:

Image.asset('assets/images/profile.png')
  .changeWidgetOnHover(
    Image.asset('assets/images/profile_hover.png')
  )

Advanced Usage:

ClipRRect(
  borderRadius: BorderRadius.circular(100),
  child: Image.asset(
    'assets/images/profile_image.png',
    fit: BoxFit.cover,
    width: 150,
    height: 150,
    errorBuilder: (context, error, stackTrace) {
      return const Icon(Icons.person, size: 150);
    },
  ).changeWidgetOnHover(
    Image.asset(
      'assets/images/profile_image_hover.png',
      fit: BoxFit.cover,
      width: 150,
      height: 150,
      errorBuilder: (context, error, stackTrace) {
        return const Icon(Icons.person_outline, size: 150);
      },
    ),
    duration: Duration(milliseconds: 500),
    transitionBuilder: (child, animation) {
      return FadeTransition(
        opacity: animation,
        child: ScaleTransition(
          scale: Tween<double>(begin: 0.8, end: 1.0).animate(animation),
          child: child,
        ),
      );
    },
    cursor: SystemMouseCursors.grab,
  ),
)

Customizable Properties:

Note: This extension only works with Image widgets.

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

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