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

Libraries

apptomate_custom_container