AnimatedBoxAppi

A customizable animated box widget that provides smooth transitions between different states with hover effects and animations.

Features

• Smooth Animations: Configurable animation duration with easing curves
• Hover Effects: Interactive hover states with customizable properties
• Flexible Styling: Support for colors, borders, elevation, and decorations
• Touch Support: Tap and hover event handling
• Customizable Child: Dynamic child content based on hover state

Usage

AnimatedBoxAppi(
  fromHeight: 100,
  toHeight: 120,
  fromWidth: 200,
  toWidth: 220,
  fromColor: Colors.blue,
  toColor: Colors.blueAccent,
  animationDuration: Duration(milliseconds: 300),
  ontap: () {
    print('Box tapped!');
  },
  child: (hovered) => Container(
    child: Text(
      hovered ? 'Hovered!' : 'Normal',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

Parameters

Parameter	Type	Description
child	dynamic	Required. Function that returns widget content, receives hovered boolean
fromHeight	double	Required. Initial height of the box
animationDuration	Duration?	Animation duration (default: 600ms)
toHeight	double?	Height when hovered (defaults to fromHeight)
fromWidth	double?	Initial width of the box
toWidth	double?	Width when hovered (defaults to fromWidth)
fromRadius	double?	Initial border radius
toRadius	double?	Border radius when hovered
fromColor	Color?	Initial background color
toColor	Color?	Background color when hovered
fromElevation	double?	Initial elevation
toElevation	double?	Elevation when hovered
ontap	Function?	Callback function when box is tapped
onHovered	Function?	Callback function when box is hovered
decorationImg	DecorationImage?	Background decoration image
borderColor	Color?	Border color
borderWidth	double?	Border width
borderRadius	double?	Container border radius
childFromColor	Color?	Child color in normal state
childToColor	Color?	Child color when hovered

Examples

Basic Animated Box

AnimatedBoxAppi(
  fromHeight: 80,
  toHeight: 100,
  fromColor: Colors.grey[300],
  toColor: Colors.blue,
  child: (hovered) => Center(
    child: Icon(
      Icons.star,
      color: hovered ? Colors.white : Colors.grey[600],
    ),
  ),
  ontap: () => print('Star tapped!'),
)

Card with Elevation Animation

AnimatedBoxAppi(
  fromHeight: 150,
  fromWidth: 200,
  fromElevation: 2,
  toElevation: 8,
  fromRadius: 8,
  toRadius: 12,
  borderColor: Colors.grey[300],
  borderWidth: 1,
  child: (hovered) => Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      children: [
        Text('Hover me!'),
        if (hovered) Icon(Icons.arrow_upward),
      ],
    ),
  ),
)