Height

Control the height of widgets using the h-* 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: '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

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

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.