Const widget that provides a box-like layout with customizable elevation.

Usage

To read more about classes and other references used by wx_box, see the API Reference.

WxBox(
  width: 50,
  height: 50,
)

WxBox(
  color: Theme.of(context).colorScheme.surface,
  width: 50,
  height: 50,
  elevation: 2,
  border: CircleBorder(),
)

WxBox.circle(
  color: Colors.amber,
  radius: 25,
  borderWidth: 5,
  borderStyle: BorderStyle.solid,
  borderColor: Theme.of(context).colorScheme.surface,
  borderOffset: BorderSide.strokeAlignOutside,
  alignment: Alignment.center,
  child: Text(
    '1',
    style: Theme.of(context).textTheme.titleLarge,
  ),
)

WxBox.stadium(
  color: Colors.amber,
  width: 150,
  height: 50,
  borderSide: BorderSide(
    width: 5,
    style: BorderStyle.solid,
    color: Colors.black,
    strokeAlign: BorderSide.strokeAlignOutside,
  ),
  alignment: Alignment.center,
  child: Text(
    'text',
    style: Theme.of(context).textTheme.titleLarge,
  ),
)

Animated Box

Use WxAnimatedBox for smooth implicit animations across size, padding, margin, color, elevation, and border shapes:

WxAnimatedBox(
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  width: isExpanded ? 200 : 100,
  height: 60,
  color: isExpanded ? Colors.indigo : Colors.blue,
  borderRadius: BorderRadius.circular(isExpanded ? 24 : 8),
  elevation: isExpanded ? 6 : 1,
  child: const Center(
    child: Text('Animated Box'),
  ),
)

Advanced Borders

Draw customizable borders with solid, dashed, dotted, or morse patterns:

WxBorder(
  shape: WxRectangleBorder(
    corners: BorderRadius.circular(12),
    width: 2,
    color: Colors.blueAccent,
    style: WxBorderStyle.dashed,
  ),
  child: const Padding(
    padding: EdgeInsets.all(16),
    child: Text('Dashed Border Box'),
  ),
)

Sponsoring

If this package or any other package I created is helping you, please consider to sponsor me so that I can take time to read the issues, fix bugs, merge pull requests and add features to these packages.