Dimension — A CSS inspired distance calculating package for Flutter

CSS offers the <length>/<percentage> data type for easier responsive design of websites. It also allows some handy functions like:

max(10px, 10%)
calc(10px + 10%)
clamp(10px, 50%, 20px)
abstract class Dimension {
const Dimension();

double toPX({double? constraint, Size? screenSize});

Dimension? add(Dimension other) => null;

Dimension operator +(Dimension other);

Dimension operator -();

Dimension operator -(Dimension other);

Dimension scale(double t);

static Dimension max(Dimension value1, Dimension value2);

static Dimension min(Dimension value1, Dimension value2);

static Dimension clamp(Dimension min, Dimension value, Dimension max);
Dimension? lerpFrom(Dimension? a, double t);

Dimension? lerpTo(Dimension? b, double t);

static Dimension? lerp(Dimension? a, Dimension? b, double t);
class Length extends Dimension {
final double value;
final LengthUnit unit;

const Length(this.value, {this.unit = LengthUnit.px});
enum LengthUnit {
///logic pixel
///percent of the parent size
///percent of the screen width
///percent of the screen height
var length=Length(10.0, unit: LengthUnit.percent);
length=10.toPXLength; //10 px
length=10.toPercentLength; // 10% of the parent constraint
length=10.toVWLength; //10% of the screen width
length=10.toVHLength; //10% of the screen height
double px=length.toPX(constraint: 100, screenSize: MediaQuery.of(context).size);
Dimension length=Dimension.clamp(10.toPXLength+10.toVWLength, 100.toPXLength+20.toPercentLength, Dimension.max(500.toPXLength, 50.toVWLength));
String jsonStr=json.encode(length.toJson());
Dimension newLength=parseDimension(jsonStr);
Animate between two responsive sizes

Ph.D. in Nuclear Physics, M.S. in Computer Science at Duke University, Flutter lover