Pixel Factor Customization
The pixel factor emulates the CSS rem unit, providing a single multiplier that scales all size-related values across your application.
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