css_units

Description:

css units

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.
Русский README.md
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 then 14.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>
copied to clipboard
Or get the latest version from github:
dependencies:
css_units:
git:
url: https://github.com/devmaslove/css_units
copied to clipboard
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 BoxConstraints
CssViewportUnits.initCustomSize(final Size size) - set custom screen size
CssViewportUnits.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
),
);
}
copied to clipboard

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;
}
copied to clipboard