Width

Control the width of widgets using the w-* utilities. Supports pixel-based, percentage-based, and viewport-relative values.

• Basic Usage
• Quick Reference
• How Values Are Calculated
• Arbitrary Values
• Responsive Design
• Customizing Theme
• Related Documentation

import 'package:fluttersdk_wind/fluttersdk_wind.dart';

WContainer(
  className: 'w-12 bg-blue-500 dark:bg-blue-700',
  child: WText('Width is 48px'), // 12 * 4 (Pixel Factor)
)

Basic Usage

Set the width of any WContainer by adding a w-* class. The predefined value is multiplied by the Pixel Factor (default 4), so w-12 produces 48px. Use w-full for 100% of the parent's width or w-[value] for an exact pixel value.

WContainer(
  className: 'w-[150] bg-red-500 dark:bg-red-700',
  child: WText('Width is 150px'), // Arbitrary value
)

WContainer(
  className: 'w-full bg-green-500 dark:bg-green-700',
  child: WText('Full width of parent'),
)

Quick Reference

How Values Are Calculated

Predefined Sizes

Width is calculated using the size value multiplied by the Pixel Factor.

• Example: w-12 → 12 × 4 (Pixel Factor) = 48px.

Special Keywords

Fraction Syntax

Use w-x/y to express a fraction of the parent width.

• Example: w-1/2 → 50% of the parent's width.

Viewport Width

Append vw inside brackets for a percentage of the viewport.

• Example: w-[50vw] → 50% of the viewport width.

Arbitrary Values

Use bracket notation to apply any exact pixel value directly, bypassing the Pixel Factor.

WContainer(
  className: 'w-[200] bg-gray-300 dark:bg-gray-600',
  child: WText('Width is exactly 200px.'),
)

Responsive Design

Prefix any w-* class with a breakpoint to change width at specific screen sizes.

WContainer(
  className: 'w-full md:w-1/2 lg:w-1/3 bg-blue-500 dark:bg-blue-700',
  child: WText('Responsive width.'),
)

Available breakpoints: sm, md, lg, xl, 2xl.

Customizing Theme

Predefined width values are scaled by the Pixel Factor. Adjust it to change the base unit.

WindTheme.setPixelFactor(3); // w-12 now produces 36px instead of 48px

See Pixel Factor for full details.

Related Documentation

• Height — control widget height.
• Max-Width and Min-Width — constrain the maximum and minimum width.
• Padding — apply inner spacing.
• Margin — apply outer spacing.
• WContainer — the primary container widget.