Pixel Factor Customization

WindTheme.setPixelFactor(6.0);
double factor = WindTheme.getPixelFactor(); // 6.0
double rem = WindTheme.getRemFactor(); // pixelFactor * 4 = 24.0

What is Pixel Factor#

Like the CSS rem unit, the pixel factor acts as a base unit multiplier. Size values (font sizes, spacing, padding) are calculated relative to this factor, enabling consistent scaling across resolutions.

Default value: the pixel factor is 4.0.

How Pixel Factor Works#

The rem factor is derived by multiplying the pixel factor by 4 (getRemFactor returns pixelFactor * 4). This relationship gives a predictable scaling system.

Example Calculation#

With the default pixel factor of 4.0:

1 rem = 4.0 * 4 = 16.0

A 2xl font size with a multiplier of 1.5 therefore calculates to:

1.5 (font size) * 4.0 (pixel factor) * 4 = 24.0

Managing Pixel Factor#

WindTheme exposes methods to read and set the pixel factor and to compute the derived rem factor.

// Retrieve the current pixel factor
double currentFactor = WindTheme.getPixelFactor();
print('Current pixel factor: $currentFactor'); // Output: 4.0 (default)

// Retrieve the derived rem factor (pixelFactor * 4)
double rem = WindTheme.getRemFactor();
print('Current rem factor: $rem'); // Output: 16.0 (default)

// Set a custom pixel factor
WindTheme.setPixelFactor(6.0);
print(WindTheme.getPixelFactor()); // Output: 6.0

Setting a new pixel factor scales all size-related values proportionally.

Related Documentation#

• Font Size — sizes scale by the rem factor
• Rounded Corners — radii scale by the rem factor
• Spacing: Padding — padding values scale by the rem factor