Width
Control the width of widgets using the w-* utilities. Supports pixel-based, percentage-based, and viewport-relative values.
On this page
sizing/width
The live demo is not available for this example.
width.dart
View source
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#
| Class | Description | Example |
|---|---|---|
w-{value} |
Width in pixels (scaled by Pixel Factor) | w-12 |
w-[{value}] |
Arbitrary width in pixels | w-[150] |
w-full |
100% of the parent's width | w-full |
w-max |
Infinite width | w-max |
w-min |
Minimum possible width (0px) | w-min |
w-{x}/{y} |
Percentage of the parent's width | w-1/2 |
w-[{value}vw] |
Percentage of the viewport width | w-[50vw] |
w-screen |
100% of the viewport width | w-screen |
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#
| Value | Result |
|---|---|
full |
double.infinity (100% of parent) |
max |
double.infinity |
min |
0.0 |
screen |
Viewport width via MediaQuery |
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.