r_css 1.0.0+36.2

R~CSS Widgets Framework

CSS stands for Cascade Style Shit

wasn't expecting that? Lol 😅😅 Gat ya!

Features

Easy to use stateful and stateless widget framework that enables you to tweak its arguments on the fly once locked with an iD (Symbol as in #book). Lost? Lol, don't be. The process is just as easy as creating an object you lock with an ID then you keep interacting with the object by interacting with it's iD... And yeah, setState, object notifier, Bloc etc. rendered useless. Not fully though... at least for now.

Several final CSS widgets have been provided directly in these widgets:

• $gap
• $lineV
• $lineH
• $box
• $button
• $canvas
• $check
• $grid
• $icon
• $image
• $input
• $list
• $mask
• $text

Same with the abstract CSS widgets:

• $async
• $border
• $collection
• $gradient
• $layout
• $parent
• $react
• $scroll
• $shadow
• $transform

Getting started

Very easy... add r_css: ^<current_version> to your pubspec.yaml, import 'package:r_css/r_css.dart' and there you go 😎.

Usage

Abstract Widgets Usage

class $class extends $CSS<$queue>
    with //
        $LAYOUT,
        $TRANSFORM,
        $SHADOW,
        $BORDER,
        $GRADIENT,
        $SCROLL {
  //
  $class(Symbol iD) : super(iD);

  @override
  $CSSKit<$clsss> createState() => _$classKit();

  // redirect getters to $get()
  String? get arg => $get(#arg);

  // redirect setters to $set()
  set arg(String? value) => $set(#arg, value);
}

class _$classKit extends $CSSKit<$class>
    with //
        $LAYOUTKit,
        $TRANSFORMKit,
        $SHADOWKit,
        $BORDERKit,
        $GRADIENTKit {
  //
  late final ScrollController _scroll;

  @override
  Widget get cmake {
    //...return resultant Widget here 
  }

  @override
  instance(init) {
    if (init) {
      //...initialize stuffs here.. easy
    }
    $SCROLLKit.scrollTo(
      //...sum abstract kits have interface to handle instance
    );
    return super.instance(init);
  }
}

Final Widgets Usage

build(context) {
  return $box.column()
    ..scrollPadding = qp.i(16)
    ..children = [
      $check(#add_money)
        ..init.isChecked = false
        ..color = Colors.red
        ..doWhile = () {
          //....do stuffs here
        }
        ..checkColor = Colors.white,
      $gap * 16,
      $lineH(Colors.black26) * 0.1,
      $gap * 16,
      $text(#hola)
        ..text = 'None selected'
        ..textSize = 15
        ..fontWeight = FontWeight.w500
        ..color = Colors.green
        ..autoAlign = qp.a()
        ..fontStyle = FontStyle.italic
        ..margin = qp.i(0, 0, 4, 0),
      $input(#input)
        ..label.text = 'Hello world'
        ..hint.text = 'Hola there'
        ..helper.text = 'Enter your hello world text not less than %max characters'
        ..counter.text = '%count/%max'
        ..maxLength = 50
        ..maxLines = 1
        ..inputStyle = InputStyle.outline
        ..obscureChar = null
        ..validators = [
              (s) => s.isEmpty ? 'Please enter a text' : null,
              (s) => s.contains(RegExp(r'lol|Lol')) ? 'LOL ain\'t allowed' : null,
        ]
        ..scrollPadding = qp.i(16, 8)
        ..margin = qp.i(6),
      $gap * 16,
      $button(#submit)
        ..icon = Icons.access_time_filled
        ..fontWeight = FontWeight.bold
        ..shadows = [qp.sh(4)]
        ..onTap = () {},
      $gap * 16,
    ];
}

Additional information

About Rey

Fun loving - Just kidding kinda kid... Lol! Hit me up for your ready made mobile apps

• Github: Meet Rey
• Gmail: [e-mail]