search ESC

Searching…

No results for "".

Type at least 2 characters to search.

Docs
You are viewing an older version (0.0.5). Go to the latest.

Max-Width and Min-Width

Constrain the maximum and minimum widths of widgets using the max-w-* and min-w-* utilities. Supports pixel-based, percentage-based, and viewport-relative values.

import 'package:fluttersdk_wind/fluttersdk_wind.dart';

WContainer(
  className: 'max-w-[300] bg-purple-500 dark:bg-purple-700',
  child: WText('Max width: 300px'),
)

WContainer(
  className: 'min-w-[100] bg-orange-500 dark:bg-orange-700',
  child: WText('Min width: 100px'),
)

Basic Usage

Use max-w-* to prevent a widget from growing beyond a certain width. Use min-w-* to ensure it never shrinks below a minimum. Both accept the same value forms as the w-* utilities.

WContainer(
  className: 'max-w-10 bg-purple-500 dark:bg-purple-700',
  child: WText('Max width: 40px'), // 10 * 4 (Pixel Factor)
)

WContainer(
  className: 'min-w-12 bg-yellow-500 dark:bg-yellow-700',
  child: WText('Min width: 48px'), // 12 * 4 (Pixel Factor)
)

Quick Reference

Max-Width

Class Description Example
max-w-{value} Maximum width in pixels (scaled by Pixel Factor) max-w-20
max-w-[{value}] Arbitrary maximum width in pixels max-w-[300]
max-w-full 100% of the parent's width max-w-full
max-w-screen 100% of the viewport width max-w-screen
max-w-{x}/{y} Percentage of the parent's width max-w-1/2
max-w-[{value}vw] Percentage of the viewport width max-w-[80vw]

Min-Width

Class Description Example
min-w-{value} Minimum width in pixels (scaled by Pixel Factor) min-w-20
min-w-[{value}] Arbitrary minimum width in pixels min-w-[300]
min-w-full 100% of the parent's width min-w-full
min-w-screen 100% of the viewport width min-w-screen
min-w-{x}/{y} Percentage of the parent's width min-w-1/2
min-w-[{value}vw] Percentage of the viewport width min-w-[80vw]

How Values Are Calculated

Predefined Sizes

Values are multiplied by the Pixel Factor.

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

Special Keywords

Value Result
full double.infinity (100% of parent)
screen Viewport width via MediaQuery

Fraction Syntax

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

  • Example: max-w-3/4 → 75% of the parent's width.

Viewport Width

Append vw inside brackets for a percentage of the viewport.

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

Arbitrary Values

Use bracket notation for an exact pixel value, bypassing the Pixel Factor.

WContainer(
  className: 'max-w-[600] min-w-[200] bg-gray-200 dark:bg-gray-700',
  child: WText('Width stays between 200px and 600px.'),
)

Responsive Design

Combine max/min width with breakpoint prefixes for responsive constraints.

WContainer(
  className: 'max-w-full md:max-w-[600] lg:max-w-[800] bg-blue-500 dark:bg-blue-700',
  child: WText('Responsive max-width.'),
)

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