WContainer

The WContainer widget is a utility-first container widget in the Wind plugin, designed to simplify the creation of styled containers in Flutter applications. You can apply styles using utility classes, making it highly customizable and efficient.

Supported Utility Classes

The following utility classes can be used with the WCard widget:

Class Type	Example	Documentation
Responsive Design	sm:p-4, xs:mt-2	Responsive Design
Flex-x	flex-1, flex-3	Flex-x
Flex Fit Classes	flex-grow, flex-auto	Flex Fit Classes
Alignment	alignment-top-left	Alignment
Padding	p-4, p-[11]	Padding
Margin	m-8, m-[4]	Margin
Width	w-10, w-[30]	Width
Height	h-10, h-[30]	Height
Max-Width & Min-Width	max-w-10, min-w-10	Max-Width & Min-Width
Max-Height & Min-Height	max-h-10, min-h-10	Max-Height & Min-Height
Background Color	bg-red-500, bg-green	Background Color
Border Width	border-4, border-[6]	Border Width
Border Color	border-red-500, border-[#1abc9c]	Border Color
Border Radius	rounded-lg, rounded-full	Border Radius
Shadow	shadow-sm, shadow-lg	Shadow

Example

WContainer(
  className: 'bg-gray-200 p-4 rounded-lg',
  child: WText('This is a container', className: 'text-lg text-gray-700'),
);

The above example HTML equivalent is:

<div class="bg-gray-200 p-4 rounded-lg">
  <span class="text-lg text-gray-700">This is a container</span>
</div>