apptomate_custom_container 0.0.2

A highly configurable container widget with advanced styling options and shadow effects.

CustomContainer

A highly configurable container widget with advanced styling options and shadow effects.

Features

• Flexible Layout:

  • Adjustable dimensions
  • Custom padding/margin
  • Rectangle or circle shapes

• Visual Customization:

  • Background color/gradient
  • Custom borders
  • Multiple shadow configurations
  • Inset shadows option
  • Clip behaviors

• Interaction:

  • Tap handler
  • Gesture support

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_container: ^0.0.2

Basic Usage

CustomContainer(
  child: Text('Hello World'),
  height: 100,
  width: 200,
)

Complete Examples

1. Card with Shadow

CustomContainer(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Card Content'),
  ),
  shadows: [
    ShadowConfig(
      color: Colors.black38,
      blurRadius: 10,
      spreadRadius: 2,
      offset: Offset(0, 4),
  ],
  borderRadius: 16,
)

2. Circular Container

CustomContainer(
  height: 120,
  width: 120,
  shape: BoxShape.circle,
  child: Icon(Icons.person, size: 40),
  backgroundColor: Colors.blue,
  border: Border.all(color: Colors.white, width: 3),
)

3. Gradient with Inset Shadow

CustomContainer(
  height: 180,
  width: double.infinity,
  gradient: LinearGradient(
    colors: [Colors.purple, Colors.blue],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  enableInsetShadow: true,
  child: Center(
    child: Text('Premium', 
      style: TextStyle(color: Colors.white, fontSize: 24)),
)

Parameter Reference

Core Properties

Parameter	Type	Description
child	Widget	Required child widget
height	double?	Container height
width	double?	Container width

Style Options

Parameter	Type	Default	Description
backgroundColor	Color?	Colors.white	Background color
gradient	Gradient?	null	Gradient background
border	BoxBorder?	null	Border styling
shape	BoxShape	rectangle	Container shape
borderRadius	double	12.0	Corner radius (rectangle only)
clipBehavior	Clip	antiAlias	Content clipping

Shadow Options

Parameter	Type	Default	Description
shadows	List<ShadowConfig>	Basic shadow	Shadow configurations
enableInsetShadow	bool	false	Additional inner shadow

Layout Options

Parameter	Type	Description
padding	EdgeInsetsGeometry?	Inner spacing
margin	EdgeInsetsGeometry?	Outer spacing

Interaction

Parameter	Type	Description
onTap	Function()?	Tap handler

ShadowConfig Reference

Parameter	Type	Default	Description
color	Color	Required	Shadow color
blurRadius	double	6.0	Shadow blur amount
spreadRadius	double	1.0	Shadow spread amount
offset	Offset	Offset(0, 2)	Shadow direction

Best Practices

1. Performance:

   • Avoid excessive shadow layers
   • Use gradients sparingly
   • Set explicit dimensions when possible

2. Design Consistency:

   • Standardize border radii
   • Maintain consistent shadow styles
   • Use a limited set of container variants

3. Accessibility:

   • Ensure sufficient contrast
   • Provide visual feedback for interactive containers

4. Responsive Design:

   • Use percentage widths for flexible layouts
   • Consider aspect ratios for media containers