BoxAppi

A flexible container widget with built-in styling, animations, and interaction capabilities.

Overview

BoxAppi is a powerful container widget that combines the functionality of Flutter's Container, GestureDetector, and AnimatedContainer into a single, easy-to-use component. It's perfect for creating cards, buttons, panels, and any other UI elements that need styling and interaction.

Features

🎨 Rich Styling - Colors, borders, shadows, gradients
🖱️ Interactive - Tap, hover, and gesture support
📐 Flexible Layout - Width, height, padding, margin
🌟 Visual Effects - Shadows, borders, rounded corners
📱 Responsive - Adapts to different screen sizes
⚡ Performance - Optimized rendering

Basic Usage

BoxAppi(
  width: 200,
  height: 100,
  color: Colors.blue,
  borderRadius: 12,
  child: Center(
    child: TextAppi(
      text: 'Hello Box!',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

Properties

Property	Type	Default	Description
`width`	`double?`	`null`	Box width
`height`	`double?`	`null`	Box height
`color`	`Color?`	`null`	Background color
`borderRadius`	`double?`	`null`	Border radius for all corners
`border`	`Border?`	`null`	Border styling
`boxShadow`	`List<BoxShadow>?`	`null`	Shadow effects
`gradient`	`Gradient?`	`null`	Background gradient
`padding`	`EdgeInsets?`	`null`	Internal padding
`margin`	`EdgeInsets?`	`null`	External margin
`child`	`Widget?`	`null`	Child widget
`onTap`	`VoidCallback?`	`null`	Tap callback
`onLongPress`	`VoidCallback?`	`null`	Long press callback
`onHover`	`ValueChanged<bool>?`	`null`	Hover callback

Examples

Basic Container

BoxAppi(
  width: 150,
  height: 80,
  color: Colors.blue[100],
  borderRadius: 8,
  child: Center(
    child: TextAppi(text: 'Basic Box'),
  ),
)

Card-Style Container

BoxAppi(
  width: 300,
  height: 200,
  color: Colors.white,
  borderRadius: 16,
  boxShadow: [
    BoxShadow(
      color: Colors.black.withOpacity(0.1),
      blurRadius: 10,
      offset: Offset(0, 4),
    ),
  ],
  padding: EdgeInsets.all(20),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      TextAppi(
        text: 'Card Title',
        style: TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
      SizedBox(height: 8),
      TextAppi(
        text: 'Card content goes here...',
        style: TextStyle(color: Colors.grey[600]),
      ),
    ],
  ),
)

Interactive Button

BoxAppi(
  width: 200,
  height: 50,
  color: Colors.blue,
  borderRadius: 25,
  onTap: () {
    print('Button tapped!');
  },
  child: Center(
    child: TextAppi(
      text: 'Tap Me',
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

Gradient Background

BoxAppi(
  width: 250,
  height: 120,
  gradient: LinearGradient(
    colors: [Colors.purple, Colors.blue],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  borderRadius: 20,
  child: Center(
    child: TextAppi(
      text: 'Gradient Box',
      style: TextStyle(
        color: Colors.white,
        fontSize: 18,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

Bordered Container

BoxAppi(
  width: 180,
  height: 100,
  color: Colors.transparent,
  borderRadius: 12,
  border: Border.all(
    color: Colors.blue,
    width: 2,
  ),
  padding: EdgeInsets.all(16),
  child: Center(
    child: TextAppi(
      text: 'Bordered',
      style: TextStyle(
        color: Colors.blue,
        fontWeight: FontWeight.w600,
      ),
    ),
  ),
)

Advanced Styling

Multiple Shadows

BoxAppi(
  width: 200,
  height: 100,
  color: Colors.white,
  borderRadius: 16,
  boxShadow: [
    BoxShadow(
      color: Colors.blue.withOpacity(0.2),
      blurRadius: 20,
      offset: Offset(0, 10),
    ),
    BoxShadow(
      color: Colors.black.withOpacity(0.1),
      blurRadius: 6,
      offset: Offset(0, 2),
    ),
  ],
  child: Center(child: TextAppi(text: 'Multi Shadow')),
)

Complex Border

BoxAppi(
  width: 200,
  height: 100,
  color: Colors.white,
  borderRadius: 12,
  border: Border(
    top: BorderSide(color: Colors.red, width: 3),
    left: BorderSide(color: Colors.blue, width: 2),
    right: BorderSide(color: Colors.green, width: 2),
    bottom: BorderSide(color: Colors.orange, width: 3),
  ),
  child: Center(child: TextAppi(text: 'Complex Border')),
)

Radial Gradient

BoxAppi(
  width: 200,
  height: 200,
  gradient: RadialGradient(
    colors: [Colors.yellow, Colors.orange, Colors.red],
    stops: [0.0, 0.5, 1.0],
  ),
  borderRadius: 100, // Makes it circular
  child: Center(
    child: TextAppi(
      text: 'Radial',
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

Interactive Features

Hover Effects

class HoverBox extends StatefulWidget {
  @override
  _HoverBoxState createState() => _HoverBoxState();
}

class _HoverBoxState extends State<HoverBox> {
  bool isHovered = false;

  @override
  Widget build(BuildContext context) {
    return BoxAppi(
      width: 200,
      height: 100,
      color: isHovered ? Colors.blue[700] : Colors.blue,
      borderRadius: 12,
      onHover: (hovered) {
        setState(() {
          isHovered = hovered;
        });
      },
      child: Center(
        child: TextAppi(
          text: 'Hover Me',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

Tap Animation

class TapAnimationBox extends StatefulWidget {
  @override
  _TapAnimationBoxState createState() => _TapAnimationBoxState();
}

class _TapAnimationBoxState extends State<TapAnimationBox> {
  bool isTapped = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => setState(() => isTapped = true),
      onTapUp: (_) => setState(() => isTapped = false),
      onTapCancel: () => setState(() => isTapped = false),
      child: AnimatedContainer(
        duration: Duration(milliseconds: 100),
        transform: Matrix4.identity()
          ..scale(isTapped ? 0.95 : 1.0),
        child: BoxAppi(
          width: 200,
          height: 100,
          color: Colors.green,
          borderRadius: 12,
          child: Center(
            child: TextAppi(
              text: 'Tap Animation',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

Layout Examples

Responsive Grid

LayoutBuilder(
  builder: (context, constraints) {
    final isWide = constraints.maxWidth > 600;
    return Wrap(
      spacing: 16,
      runSpacing: 16,
      children: List.generate(6, (index) {
        return BoxAppi(
          width: isWide ? 180 : 150,
          height: isWide ? 120 : 100,
          color: Colors.primaries[index % Colors.primaries.length],
          borderRadius: 12,
          child: Center(
            child: TextAppi(
              text: 'Item ${index + 1}',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        );
      }),
    );
  },
)

Card Layout

Column(
  children: [
    BoxAppi(
      width: double.infinity,
      color: Colors.white,
      borderRadius: 16,
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.1),
          blurRadius: 8,
          offset: Offset(0, 2),
        ),
      ],
      padding: EdgeInsets.all(20),
      margin: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextAppi(
            text: 'Card Header',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 12),
          TextAppi(
            text: 'This is the card content area where you can place any widgets.',
            style: TextStyle(
              fontSize: 16,
              color: Colors.grey[600],
              height: 1.5,
            ),
          ),
          SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              BoxAppi(
                color: Colors.blue,
                borderRadius: 8,
                padding: EdgeInsets.symmetric(
                  horizontal: 16,
                  vertical: 8,
                ),
                onTap: () => print('Action tapped'),
                child: TextAppi(
                  text: 'Action',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ],
)

Best Practices

1. Use Consistent Styling

// Good: Use design tokens
BoxAppi(
  color: DesignTokens.surface,
  borderRadius: DesignTokens.radiusMD,
  boxShadow: DesignTokens.shadowSM,
)

// Avoid: Hard-coded values
BoxAppi(
  color: Color(0xFFFFFFFF),
  borderRadius: 12,
  boxShadow: [BoxShadow(...)],
)

2. Optimize Performance

// Good: Use const when possible
const BoxAppi(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Icon(Icons.star),
)

3. Handle Different States

BoxAppi(
  color: isEnabled ? Colors.blue : Colors.grey,
  onTap: isEnabled ? () => handleTap() : null,
  child: TextAppi(
    text: 'Button',
    style: TextStyle(
      color: isEnabled ? Colors.white : Colors.grey[600],
    ),
  ),
)

4. Accessibility

Semantics(
  button: true,
  label: 'Custom button',
  child: BoxAppi(
    onTap: () => handleTap(),
    child: TextAppi(text: 'Button'),
  ),
)

Common Use Cases

1. Custom Buttons

BoxAppi(
  width: 200,
  height: 48,
  color: Colors.blue,
  borderRadius: 24,
  onTap: onPressed,
  child: Center(
    child: TextAppi(
      text: 'Custom Button',
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.w600,
      ),
    ),
  ),
)

2. Information Cards

BoxAppi(
  width: double.infinity,
  color: Colors.blue[50],
  borderRadius: 12,
  border: Border.all(color: Colors.blue[200]!),
  padding: EdgeInsets.all(16),
  child: Row(
    children: [
      Icon(Icons.info, color: Colors.blue),
      SizedBox(width: 12),
      Expanded(
        child: TextAppi(
          text: 'This is an information message.',
          style: TextStyle(color: Colors.blue[800]),
        ),
      ),
    ],
  ),
)

3. Image Containers

BoxAppi(
  width: 150,
  height: 150,
  borderRadius: 75,
  border: Border.all(color: Colors.grey[300]!, width: 2),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(73),
    child: Image.network(
      'https://example.com/image.jpg',
      fit: BoxFit.cover,
    ),
  ),
)

AnimatedBoxAppi - For animated containers
TextAppi - For text content
LinearProgressIndicatorAppi - For progress containers

Ready to create interactive containers? Check out AnimatedBoxAppi for smooth animations!

Overview​

Features​

Basic Usage​

Properties​

Examples​

Basic Container​

Card-Style Container​

Interactive Button​

Gradient Background​

Bordered Container​

Advanced Styling​

Multiple Shadows​

Complex Border​

Radial Gradient​

Interactive Features​

Hover Effects​

Tap Animation​

Layout Examples​

Responsive Grid​

Card Layout​

Best Practices​

1. Use Consistent Styling​

2. Optimize Performance​

3. Handle Different States​

4. Accessibility​

Common Use Cases​

1. Custom Buttons​

2. Information Cards​

3. Image Containers​

Related Components​