CSS Units
Adding a converter for CSS Viewport Units - vmin
, vmax
, vw
, vh
, rem
.
Convenient wrapper to set dimensions relative to a screen or LayoutBuilder`s BoxConstraints.
Idea
The idea is to add relative sizes from CSS Units 3 spec.
To do this without functions and classes, just extending the double
:
42.vmin
- 42% of the smallest side of the screen in logical pixels (double)42.vmax
- 42% of the largest side of the screen in logical pixels (double)42.vw
- 42% of the width of the screen in logical pixels (double)42.vh
- 42% of the height of the screen in logical pixels (double)3.rem
- 42 - three heights of default font size (if you didn't change then14.0 * 3
) in logical pixels (double)
Plus added percentage:
42.pc
- 42%, i.e. 0.42 (double)
Inspired by the idea from the package dimension
Features
Readability!
See how beautiful and clear it is to set relative sizes: width: 4.vmax
Install
Change pubspec.yaml
(and run an implicit pub get):
dependencies:
css_units: <latest_version>
Or get the latest version from github:
dependencies:
css_units:
git:
url: https://github.com/devmaslove/css_units
Usage
Attention! You should always call CssViewportUnits.initContextSizes(context);
before using relative sizes.
Dimension initialization can also be set via:
CssViewportUnits.initConstraintsSize(final BoxConstraints constraints)
- set dimensions relative to LayoutBuilder`s BoxConstraintsCssViewportUnits.initCustomSize(final Size size)
- set custom screen sizeCssViewportUnits.initDefaultFontSize(final double fontSize)
- set custom default font size
Attention! Call them directly in the context where you use relative sizes. You need to understand that the relative sizes are calculated dynamically. This means that if you set viewport size in one widget, and use relative sizes in others, they will not rebuild when viewport size change.
For example, let's set the dimensions to 60 vmin
for the Container:
@override
Widget build(BuildContext context) {
CssViewportUnits.initContextSizes(context);
return Container(
width: 60.vmin, // cellSize
height: 60.vmin, // cellSize
margin: EdgeInsets.all(1.vmin), // cellGap
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(1.vmin), // borderRadius
),
);
}
If you put all the sizes in a separate resource file, to get values, use getters (so that sizes are calculated dynamically when requested). Also take out the initialization of the context sizes there and call it before using it.
For example, let's take out the sizes in resources/app_sizes.dart
:
class AppSizes {
static initContextSizes(BuildContext context) {
CssViewportUnits.initContextSizes(context);
}
static get cellSize => 60.vmin;
static get cellGap => 1.vmin;
static get borderRadius => 1.vmin;
static get fontSize => 7.5.vmin;
}