Height
Control the height of widgets using the h-* utilities. Supports pixel-based, percentage-based, and viewport-relative values.
On this page
sizing/height
The live demo is not available for this example.
height.dart
View source
import 'package:fluttersdk_wind/fluttersdk_wind.dart';
WContainer(
className: 'h-12 bg-blue-500 dark:bg-blue-700',
child: WText('Height is 48px'), // 12 * 4 (Pixel Factor)
)
Basic Usage#
Set the height of any WContainer by adding an h-* class. The predefined value is multiplied by the Pixel Factor (default 4), so h-12 produces 48px. Use h-full for 100% of the parent's height or h-[value] for an exact pixel value.
WContainer(
className: 'h-[150] bg-red-500 dark:bg-red-700',
child: WText('Height is 150px'), // Arbitrary value
)
WContainer(
className: 'h-full bg-green-500 dark:bg-green-700',
child: WText('Full height of parent'),
)
Quick Reference#
| Class | Description | Example |
|---|---|---|
h-{value} |
Height in pixels (scaled by Pixel Factor) | h-12 |
h-[{value}] |
Arbitrary height in pixels | h-[150] |
h-full |
100% of the parent's height | h-full |
h-max |
Infinite height | h-max |
h-min |
Minimum possible height (0px) | h-min |
h-{x}/{y} |
Percentage of the parent's height | h-1/2 |
h-[{value}vh] |
Percentage of the viewport height | h-[50vh] |
h-screen |
100% of the viewport height | h-screen |
How Values Are Calculated#
Predefined Sizes#
Height is calculated using the size value multiplied by the Pixel Factor.
- Example:
h-12→ 12 × 4 (Pixel Factor) = 48px.
Special Keywords#
| Value | Result |
|---|---|
full |
double.infinity (100% of parent) |
max |
double.infinity |
min |
0.0 |
screen |
Viewport height via MediaQuery |
Fraction Syntax#
Use h-x/y to express a fraction of the parent height.
- Example:
h-1/2→ 50% of the parent's height.
Viewport Height#
Append vh inside brackets for a percentage of the viewport.
- Example:
h-[50vh]→ 50% of the viewport height.
Arbitrary Values#
Use bracket notation to apply any exact pixel value directly, bypassing the Pixel Factor.
WContainer(
className: 'h-[200] bg-gray-300 dark:bg-gray-600',
child: WText('Height is exactly 200px.'),
)
Responsive Design#
Prefix any h-* class with a breakpoint to change height at specific screen sizes.
WContainer(
className: 'h-32 md:h-48 lg:h-64 bg-blue-500 dark:bg-blue-700',
child: WText('Responsive height.'),
)
Available breakpoints: sm, md, lg, xl, 2xl.
Customizing Theme#
Predefined height values are scaled by the Pixel Factor. Adjust it to change the base unit.
WindTheme.setPixelFactor(3); // h-12 now produces 36px instead of 48px
See Pixel Factor for full details.
Related Documentation#
- Width — control widget width.
- Max-Height and Min-Height — constrain the maximum and minimum height.
- Padding — apply inner spacing.
- Margin — apply outer spacing.
- WContainer — the primary container widget.