Predefined sizes for padding, width, and height

kawaijoe commented 4 months ago

Description

Including some constants that can be used in place of magic values would be nice. These constant values can be used for widgets' padding, width, and height.

In web development, Tailwind is commonly used and it has a decent solution. Tailwind example usage:

w-0 for a width of 0px
w-0.5 for a width of 2px
w-1 for a width of 4px
w-1.5 for a width of 6px
w-2, w-2.5, w-3, ...

Ideally, it would be great to adopt something similar to what Tailwind is doing. However, we noticed a major issue when trying to mimick a similar model. Tailwind uses a string to represent these variations and has no issues with using a dot separator to represent half (eg. 0.5).

On the other hand, a dot in Dart represents an accessor. In addition, variables in Dart cannot start with a number.

Any input or suggestions are greatly appreciated!

Possible solutions

Bump values eg. bump 0.5 values -> 1 and 1 -> 2. While this will generally work, it breaks down with the generic heuristic used. Generally, 1 represents 4px in Tailwind, and 0.5 is exclusively used for smaller values to represent 2px. Another great alternative we're leaning towards is to make 1 represent 2px. However, that may deviate from what Tailwind users expect.
Suffix characters to represent half eg. bump 0.5 values -> 0h OR 0.5 values -> 0Half. Might not look/feel the best.

Reference links

JoDeveloper commented 4 months ago

something like this ?

import 'package:flutter/material.dart';

class FSizes {
  // Widths and Heights
  static const w0 = 0.0;
  static const w1 = 4.0;
  static const w2 = 8.0;
  static const w3 = 12.0;
  static const w4 = 16.0;
  static const w5 = 20.0;
  static const w6 = 24.0;
  static const w8 = 32.0;
  static const w10 = 40.0;
  static const w12 = 48.0;
  static const w16 = 64.0;
  static const w20 = 80.0;
  static const w24 = 96.0;
  static const w32 = 128.0;
  static const w40 = 160.0;
  static const w48 = 192.0;
  static const w56 = 224.0;
  static const w64 = 256.0;
  static const w72 = 288.0;
  static const w80 = 320.0;
  static const w96 = 384.0;

  // Heights (same as widths for consistency)
  static const h0 = w0;
  static const h1 = w1;
  static const h2 = w2;
  static const h3 = w3;
  static const h4 = w4;
  static const h5 = w5;
  static const h6 = w6;
  static const h8 = w8;
  static const h10 = w10;
  static const h12 = w12;
  static const h16 = w16;
  static const h20 = w20;
  static const h24 = w24;
  static const h32 = w32;
  static const h40 = w40;
  static const h48 = w48;
  static const h56 = w56;
  static const h64 = w64;
  static const h72 = w72;
  static const h80 = w80;
  static const h96 = w96;

  // Paddings
  static const p0 = 0.0;
  static const p1 = 4.0;
  static const p2 = 8.0;
  static const p3 = 12.0;
  static const p4 = 16.0;
  static const p5 = 20.0;
  static const p6 = 24.0;
  static const p8 = 32.0;
  static const p10 = 40.0;
  static const p12 = 48.0;
  static const p16 = 64.0;
  static const p20 = 80.0;
  static const p24 = 96.0;
  static const p32 = 128.0;
  static const p40 = 160.0;
  static const p48 = 192.0;
  static const p56 = 224.0;
  static const p64 = 256.0;

  // Margin (same as padding for consistency)
  static const m0 = p0;
  static const m1 = p1;
  static const m2 = p2;
  static const m3 = p3;
  static const m4 = p4;
  static const m5 = p5;
  static const m6 = p6;
  static const m8 = p8;
  static const m10 = p10;
  static const m12 = p12;
  static const m16 = p16;
  static const m20 = p20;
  static const m24 = p24;
  static const m32 = p32;
  static const m40 = p40;
  static const m48 = p48;
  static const m56 = p56;
  static const m64 = p64;

  // Percentage-based sizes
  static double wp(BuildContext context, double percent) =>
      MediaQuery.of(context).size.width * percent / 100;

  static double hp(BuildContext context, double percent) =>
      MediaQuery.of(context).size.height * percent / 100;

  // Padding helpers
  static EdgeInsets pa(double value) => EdgeInsets.all(value);
  static EdgeInsets ph(double value) => EdgeInsets.symmetric(horizontal: value);
  static EdgeInsets pv(double value) => EdgeInsets.symmetric(vertical: value);
  static EdgeInsets pt(double value) => EdgeInsets.only(top: value);
  static EdgeInsets pr(double value) => EdgeInsets.only(right: value);
  static EdgeInsets pb(double value) => EdgeInsets.only(bottom: value);
  static EdgeInsets pl(double value) => EdgeInsets.only(left: value);

  // Margin helpers
  static EdgeInsets ma(double value) => EdgeInsets.all(value);
  static EdgeInsets mh(double value) => EdgeInsets.symmetric(horizontal: value);
  static EdgeInsets mv(double value) => EdgeInsets.symmetric(vertical: value);
  static EdgeInsets mt(double value) => EdgeInsets.only(top: value);
  static EdgeInsets mr(double value) => EdgeInsets.only(right: value);
  static EdgeInsets mb(double value) => EdgeInsets.only(bottom: value);
  static EdgeInsets ml(double value) => EdgeInsets.only(left: value);

}

kawaijoe commented 4 months ago

@JoDeveloper thanks for the suggestion.

I think the values need not be repeated for padding/margin because they represent the same thing. However, it doesn't quite solve the .5 issue :(

I'm personally not too big of a fan of:

static EdgeInsets pa(double value) => EdgeInsets.all(value);
static EdgeInsets ph(double value) => EdgeInsets.symmetric(horizontal: value);
static EdgeInsets pv(double value) => EdgeInsets.symmetric(vertical: value);
static EdgeInsets pt(double value) => EdgeInsets.only(top: value);
...

While it does make the code shorter, I think it potentially makes the codebase harder to understand compared to using the EdgeInsets constructor directly.

JoDeveloper commented 4 months ago

https://github.com/forus-labs/forui/issues/91#issuecomment-2241141839

// Base unit (2px)
  static const double _unit = 2.0;

  // Width constants
  static const double w0 = 0;
  static const double w05 = _unit * 0.5;  // 1px
  static const double w1 = _unit;         // 2px
  static const double w15 = _unit * 1.5;  // 3px
  static const double w2 = _unit * 2;     // 4px
  static const double w25 = _unit * 2.5;  // 5px
  static const double w3 = _unit * 3;     // 6px
  static const double w35 = _unit * 3.5;  // 7px
  static const double w4 = _unit * 4;     // 8px
  static const double w5 = _unit * 5;     // 10px
  static const double w6 = _unit * 6;     // 12px
  static const double w7 = _unit * 7;     // 14px
  static const double w8 = _unit * 8;     // 16px
  static const double w9 = _unit * 9;     // 18px
  static const double w10 = _unit * 10;   // 20px
  static const double w11 = _unit * 11;   // 22px
  static const double w12 = _unit * 12;   // 24px
  static const double w14 = _unit * 14;   // 28px
  static const double w16 = _unit * 16;   // 32px
  static const double w20 = _unit * 20;   // 40px
  static const double w24 = _unit * 24;   // 48px
  static const double w28 = _unit * 28;   // 56px
  static const double w32 = _unit * 32;   // 64px
  static const double w36 = _unit * 36;   // 72px
  static const double w40 = _unit * 40;   // 80px
  static const double w44 = _unit * 44;   // 88px
  static const double w48 = _unit * 48;   // 96px
  static const double w52 = _unit * 52;   // 104px
  static const double w56 = _unit * 56;   // 112px
  static const double w60 = _unit * 60;   // 120px
  static const double w64 = _unit * 64;   // 128px
  static const double w72 = _unit * 72;   // 144px
  static const double w80 = _unit * 80;   // 160px
  static const double w96 = _unit * 96;   // 192px

kawaijoe commented 4 months ago

#91 (comment)

// Base unit (2px)
  static const double _unit = 2.0;

  // Width constants
  static const double w0 = 0;
  static const double w05 = _unit * 0.5;  // 1px
  static const double w1 = _unit;         // 2px
  static const double w15 = _unit * 1.5;  // 3px
  static const double w2 = _unit * 2;     // 4px
  static const double w25 = _unit * 2.5;  // 5px
  static const double w3 = _unit * 3;     // 6px
  static const double w35 = _unit * 3.5;  // 7px
  static const double w4 = _unit * 4;     // 8px
  static const double w5 = _unit * 5;     // 10px
  static const double w6 = _unit * 6;     // 12px
  static const double w7 = _unit * 7;     // 14px
  static const double w8 = _unit * 8;     // 16px
  static const double w9 = _unit * 9;     // 18px
  static const double w10 = _unit * 10;   // 20px
  static const double w11 = _unit * 11;   // 22px
  static const double w12 = _unit * 12;   // 24px
  static const double w14 = _unit * 14;   // 28px
  static const double w16 = _unit * 16;   // 32px
  static const double w20 = _unit * 20;   // 40px
  static const double w24 = _unit * 24;   // 48px
  static const double w28 = _unit * 28;   // 56px
  static const double w32 = _unit * 32;   // 64px
  static const double w36 = _unit * 36;   // 72px
  static const double w40 = _unit * 40;   // 80px
  static const double w44 = _unit * 44;   // 88px
  static const double w48 = _unit * 48;   // 96px
  static const double w52 = _unit * 52;   // 104px
  static const double w56 = _unit * 56;   // 112px
  static const double w60 = _unit * 60;   // 120px
  static const double w64 = _unit * 64;   // 128px
  static const double w72 = _unit * 72;   // 144px
  static const double w80 = _unit * 80;   // 160px
  static const double w96 = _unit * 96;   // 192px

I don't think that's particularly great as well. For example, w15 may be interpreted as 15 instead of 1.5.

JoDeveloper commented 4 months ago

I don't think that's particularly great as well. For example, w15 may be interpreted as 15 instead of 1.5.

other suggestions maybe :

static const double w1 = _unit;         // 1px
static const double w1Half = _unit * 1.5; // 1.5px

or :

static const double w1x = _unit;       // 1px
static const double w1y = _unit * 1.5; // 1.5px

what do you think 🤔 !

kawaijoe commented 4 months ago

I'm unsure if the x and y are good representations. Half was one of the original suggestions!

forus-labs / forui