WContainer class

A container widget with TailwindCSS-like styling support.

WContainer is a versatile layout component that wraps Flutter's Container with utility-first styling capabilities. It supports className-based styling similar to TailwindCSS, making it easy to apply consistent design patterns.

Supported Style Classes

Spacing

  • p-{size}: padding (p-1, p-2, p-4, p-6, p-8)
  • m-{size}: margin (m-1, m-2, m-4, m-6, m-8)
  • px-{size}, py-{size}: horizontal/vertical padding
  • mx-{size}, my-{size}: horizontal/vertical margin

Colors

  • bg-{color}: background color (bg-white, bg-blue-500, bg-gray-100)

Border Radius

  • rounded: small border radius
  • rounded-lg: large border radius
  • rounded-full: fully rounded

Shadows

  • shadow-sm: small shadow
  • shadow-md: medium shadow
  • shadow-lg: large shadow

Example

WContainer(
  className: 'p-6 m-4 bg-white rounded-lg shadow-md',
  child: Text('Card content'),
)

This creates a container with:

  • 24px padding on all sides
  • 16px margin on all sides
  • White background
  • Large border radius
  • Medium shadow
Inheritance

Constructors

WContainer.new({Key? key, Widget? child, String? className, double? width, double? height, EdgeInsetsGeometry? padding, EdgeInsetsGeometry? margin, Color? backgroundColor, BorderRadius? borderRadius, List<BoxShadow>? boxShadow, Border? border, AlignmentGeometry? alignment, Clip clipBehavior = Clip.none, BoxConstraints? constraints, Matrix4? transform, AlignmentGeometry? transformAlignment, Decoration? foregroundDecoration, Decoration? decoration})
Creates a Wind-styled container.
const

Properties

alignment → AlignmentGeometry?
How to align the child within the container.
final
backgroundColor → Color?
The background color of the container.
final
border → Border?
The border of the container.
final
borderRadius → BorderRadius?
The border radius of the container.
final
boxShadow → List<BoxShadow>?
The box shadows of the container.
final
child → Widget?
The widget to display inside the container.
final
className → String?
TailwindCSS-like class names for styling.
final
clipBehavior → Clip
The clip behavior for the container.
final
constraints → BoxConstraints?
Additional constraints to apply to the child.
final
decoration → Decoration?
A decoration to paint behind the child.
final
foregroundDecoration → Decoration?
A decoration to paint in front of the child.
final
hashCode → int
The hash code for this object.
no setterinherited
height → double?
The height of the container.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
margin → EdgeInsetsGeometry?
The margin outside the container.
final
padding → EdgeInsetsGeometry?
The padding inside the container.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
transform → Matrix4?
The transformation matrix to apply to the container.
final
transformAlignment → AlignmentGeometry?
The alignment of the origin for the transformation.
final
width → double?
The width of the container.
final

Methods

build(BuildContext context) → Widget
Describes the part of the user interface represented by this widget.
override
createElement() → StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited