Niku Widget

Parent Property builder for build parent Widget.

Example usage:

As Widget

Niku()
  ..bg(Colors.blue)
  ..p(21)

As Property

Container()
  .asNiku()
  ..bg(Colors.blue)
  ..p(21)

Availability

To use this widget, you can import from the following:

// All Widget
import 'package:niku/niku.dart';

// Just widget
import 'package:niku/widget/base.dart';

builder

Add custom widget.

Example Usage:

Niku()
  ..builder((child) {
    return AnimatedContainer(
      width: 200,
      height: 200,
      child: child,
    );
  });

padding

Apply padding using EdgeInsets.

Example Usage:

Niku()
  ..padding(EdgeInsets.all(20));

Equivalent to

Padding(
  padding: input,
);

p

Shorten syntax of padding

Apply padding to all side.

Example Usage:

Niku()
  ..p(20);

Equivalent to

Padding(
  padding: EdgeInsets.all(input),
);

px

Shorten syntax of padding

Apply padding to x-axis.

Example Usage:

Niku()
  ..px(20);

Equivalent to

Padding(
  padding: EdgeInsets.symmetric(horizontal: input),
);

py

Shorten syntax of padding

Apply padding to y-axis.

Example Usage:

Niku()
  ..px(20);

Equivalent to

Padding(
  padding: EdgeInsets.symmetric(vertical: input),
);

pt

Shorten syntax of padding

Apply padding to top.

Example Usage:

Niku()
  ..pt(20);

Equivalent to

Padding(
  padding: EdgeInsets.only(top: input),
);

pb

Shorten syntax of padding

Apply padding to bottom.

Example Usage:

Niku()
  ..pb(20);

Equivalent to

Padding(
  padding: EdgeInsets.only(bottom: input),
);

pl

Shorten syntax of padding

Apply padding to left.

Example Usage:

Niku()
  ..pl(20);

Equivalent to

Padding(
  padding: EdgeInsets.only(left: input),
);

pr

Shorten syntax of padding

Apply padding to right.

Example Usage:

Niku()
  ..pr(20);

Equivalent to

Padding(
  padding: EdgeInsets.only(right: input),
);

m

Shorten syntax of margin

Apply margin to all side.

Example Usage:

Niku()
  ..m(20);

Equivalent to

Container(
  margin: EdgeInsets.all(input),
);

mx

Shorten syntax of margin

Apply margin to x-axis.

Example Usage:

Niku()
  ..mx(20);

Equivalent to

Container(
  margin: EdgeInsets.symmetric(horizontal: input),
);

my

Shorten syntax of margin

Apply margin to y-axis.

Example Usage:

Niku()
  ..mx(20);

Equivalent to

Container(
  margin: EdgeInsets.symmetric(vertical: input),
);

mt

Shorten syntax of margin

Apply margin to top.

Example Usage:

Niku()
  ..mt(20);

Equivalent to

Container(
  margin: EdgeInsets.only(top: input),
);

mb

Shorten syntax of margin

Apply margin to bottom.

Example Usage:

Niku()
  ..mb(20);

Equivalent to

Container(
  margin: EdgeInsets.only(bottom: input),
);

ml

Shorten syntax of margin

Apply margin to left.

Example Usage:

Niku()
  ..ml(20);

Equivalent to

Container(
  margin: EdgeInsets.only(left: input),
);

mr

Shorten syntax of margin

Apply margin to right.

Example Usage:

Niku()
  ..mr(20);

Equivalent to

Container(
  margin: EdgeInsets.only(right: input),
);

align

Apply alignment to widget

Example Usage:

Niku()
  ..align(Alignment.topLeft);

Equivalent to

Align(
  alignment: input,
);

topLeft

Shorten syntax of align

Apply alignment to widget as Alignment.topLeft

Example Usage:

Niku()
  ..topLeft();

Equivalent to

Align(
  alignment: Alignment.topLeft,
);

topCenter

Shorten syntax of align

Apply alignment to widget as Alignment.topLeft

Example Usage:

Niku()
  ..topCenter();

Equivalent to

Align(
  alignment: Alignment.topCenter,
);

topRight

Shorten syntax of align

Apply alignment to widget as Alignment.topRight

Example Usage:

Niku()
  ..topRight();

Equivalent to

Align(
  alignment: Alignment.topRight,
);

centerLeft

Shorten syntax of align

Apply alignment to widget as Alignment.centerLeft

Example Usage:

Niku()
  ..centerLeft();

Equivalent to

Align(
  alignment: Alignment.centerLeft,
);

center

Shorten syntax of align

Apply alignment to widget as Alignment.centerLeft

Example Usage:

Niku()
  ..center();

Equivalent to

Center();

centerRight

Shorten syntax of align

Apply alignment to widget as Alignment.centerRight

Example Usage:

Niku()
  ..centerRight();

Equivalent to

Align(
  alignment: Alignment.centerRight,
);

bottomLeft

Shorten syntax of align

Apply alignment to widget as Alignment.bottomLeft

Example Usage:

Niku()
  ..bottomLeft();

Equivalent to

Align(
  alignment: Alignment.bottomLeft,
);

bottomCenter

Shorten syntax of align

Apply alignment to widget as Alignment.bottomLeft

Example Usage:

Niku()
  ..bottomCenter();

Equivalent to

Align(
  alignment: Alignment.bottomCenter,
);

bottomRight

Shorten syntax of align

Apply alignment to widget as Alignment.bottomRight

Example Usage:

Niku()
  ..bottomRight();

Equivalent to

Align(
  alignment: Alignment.bottomRight,
);

fullSize

Apply both full width and height to self.

Example Usage:

Niku()
  ..fullSize();

Equivalent to:

SizedBox(
  width: double.infinity,
  height: double.infinity,
);

fullWidth

Apply full width to self.

Example Usage:

Niku()
  ..fullWidth();

Equivalent to:

SizedBox(
  width: double.infinity,
);

fullHeight

Apply full height to self.

Example Usage:

Niku()
  ..fullHeight();

Equivalent to:

SizedBox(
  height: double.infinity,
);

aspectRatio

Apply aspect ratio.

Example Usage:

Niku()
  ..aspectRatio(16 / 9);

Equivalent to:

AspectRatio(
  aspectRatio: input,
);

expanded

Wrap widget with expanded

Example Usage:

Niku()
  ..expanded();

Equivalent to:

Expanded();

fractionSize

Set both width and height in percent.

The arguments accept:

  • width
  • height

Example Usage:

Niku()
  ..fractionSize(1, .5);

Equivalent to:

FractionallySizedBox(
  widthFactor: input1,
  heightFactor: input2,
);

fractionWidth

Set width in percent.

Example Usage:

Niku()
  ..fractionWidth(1);

Equivalent to:

FractionallySizedBox(
  widthFactor: input,
);

fractionHeight

Set height in percent.

Example Usage:

Niku()
  ..fractoinHeight(1);

Equivalent to:

FractionallySizedBox(
  heightFactor: input,
);

sizePercent

Set both width and height in percentage.

The arguments accept:

  • width
  • height

Example Usage:

Niku()
  ..sizePercent(100, 50);

Equivalent to:

FractionallySizedBox(
  widthFactor: input1 / 100,
  heightFactor: input2 / 100,
);

widthPercent

Set width in percentage.

Example Usage:

Niku()
  ..widthPercent(100);

Equivalent to:

FractionallySizedBox(
  widthFactor: input / 100,
);

heightPercent

Set height in percentage.

Example Usage:

Niku()
  ..heightPercent(50);

Equivalent to:

FractionallySizedBox(
  heightFactor: input / 100,
);

container

Wrap widget inside container.

Example Usage:

Niku()
  ..container();

Equivalent to:

Container();

constraints

Set minimum and maximum size of widget.

Example Usage:

Niku()
  ..constraints(
    BoxConstraints(
      minWidth: 200,
      maxWidth: 400,
    ),
  );

Equivalent to:

ConstrainedBox(
  constraints: input,
);

maxSize

Set maximum size of widget.

The arguments accept:

  • width
  • height

Example Usage:

Niku()
  ..maxSize(200, 100);

Equivalent to:

ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: input1,
    maxHeight: input2,
  ),
);

maxWidth

Set maximum width of widget.

Example Usage:

Niku()
  ..maxWidth(200);

Equivalent to:

ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: input1,
  ),
);

maxHeight

Set maximum height of widget.

Example Usage:

Niku()
  ..maxHeight(200);

Equivalent to:

ConstrainedBox(
  constraints: BoxConstraints(
    maxHeight: input1,
  ),
);

minSize

Set minimum size of widget.

The arguments accept:

  • width
  • height

Example Usage:

Niku()
  ..minSize(200, 100);

Equivalent to:

ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: input1,
    minHeight: input2,
  ),
);

minWidth

Set minimum width of widget.

Example Usage:

Niku()
  ..minWidth(200);

Equivalent to:

ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: input1,
  ),
);

minHeight

Set minimum height of widget.

Example Usage:

Niku()
  ..minHeight(200);

Equivalent to:

ConstrainedBox(
  constraints: BoxConstraints(
    minHeight: input1,
  ),
);

size

Set minimum size of widget.

The arguments accept:

  • width
  • height

Example Usage:

Niku()
  ..size(200, 100);

Equivalent to:

SizedBox(
  width: input1,
  height: input2,
);

width

Set minimum width of widget.

Example Usage:

Niku()
  ..width(200);

Equivalent to:

SizedBox(
  width: input1,
);

height

Set minimum height of widget.

Example Usage:

Niku()
  ..height(200);

Equivalent to:

SizedBox(
  height: input1,
);

fitted

Apply FittedBox to widget.

Example Usage:

Niku()
  ..fitted();

Equivalent to:

FittedBox();

backgroundColor

Apply background to widget.

Example Usage:

Niku()
  ..background();

Equivalent to:

ColoredBox(
  color: input,
);

bg

Shorten syntax of backgroundColor

Apply background to widget.

Example Usage:

Niku()
  ..background();

Equivalent to:

ColoredBox(
  color: input,
);

opacity

Apply opacity to widget.

Example Usage:

Niku()
  ..opacity(.5);

Equivalent to:

Opacity(
  opacity: input,
);

rounded

Apply border radius to widget.

Argument is optional, if non is provided, widget will be completely rounded.

Example Usage:

Niku()
  ..rounded(8);

Equivalent to:

ClipRRect(
  borderRadius: BorderRadius.all(
    Radius.circular(input),
  ),
  child: _widget,
);

boxDecoration

Add BoxDecoration to widget.

Example Usage:

Niku()
  ..boxDecoration(BoxDecoration(
    border: Border.all(
      color: Colors.black,
      width: 8,
    ),
  );

Equivalent to:

DecoratedBox(
  decoration: input,
);

heroTag

Add Hero to widget.

Example Usage:

Niku()
  ..heroTag("title");

Equivalent to:

Hero(
  tag: input,
)

ignorePointer

Apply IgnorePointer to widget.

Argument is optional, if non is provided, default value is true

Example Usage:

Niku()
  ..ignorePointer(true);

Equivalent to:

IgnorePointer(
  ignoring: input,
)

absorbPointer

Apply AbsorbPointer to widget.

Argument is optional, if non is provided, default value is true

Example Usage:

Niku()
  ..abosrbPointer(true);

Equivalent to:

AbsorbPointer(
  ignoring: input,
)

tooltip

Add tooltip to widget.

Example Usage:

Niku()
  ..tooltip("Blue Text");

Equivalent to:

Tooltip(
  message: input,
)

transform

Wrap widget in Transform.

Example Usage:

Niku()
  ..transform(
    Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0),
  );

Equivalent to:

Transform(
  transform: input,
)

material

Wrap widget inside Material

The argument accept named paramters:

  • elevation
  • color
  • shadowColor

Example Usage:

Niku()
  ..material(
    elevation: 4,
    color: Colors.blue,
  );

Equivalent to:

Material(
  elevation: elevation,
  color: color,
  shadowColor: shadowColor,
)

inkwell

Wrap widget inside Inkwell

The argument accept named paramters:

  • hover
  • focus
  • highlight
  • splash
  • double
  • autofocus
  • onTap

Example Usage:

Niku()
  ..inkwell(
    hoverColor: hover,
    focusColor: focus,
    highlightColor: highlight,
    splashColor: splash,
    radius: radius,
    autofocus: autofocus,
  );

Equivalent to:

Inkwell(
  hoverColor: hover,
  focusColor: focus,
  highlightColor: highlight,
  splashColor: splash,
  radius: radius,
  autofocus: autofocus,
)

border

Decorate with border using Border.

Example Usage:

Niku()
  ..border(
    Border.all(
      color: Colors.black,
      width: 8,
    ),
  );

Equivalent to:

DecoratedBox(
  decoration: BoxDecoration(
    border: input,
  ),
)

backdropFilter

Add backdrop filter to widget

Example Usage:

Niku()
  ..backdropFilter(
    ImageFilter.blur(
      sigmaX: 8,
      sigmaY: 8,
    )
  );

Equivalent to:

BackdropFilter(
  filter: input,
)

positioned

Add Positioned to widget.

The argument accept named paramters:

  • top
  • left
  • bottom
  • right

Example Usage:

Niku()
  ..positioned(
    top: top,
    left: left,
    bottom: bottom,
    right: right,
  );

Equivalent to:

Material(
  top: top,
  left: left,
  bottom: bottom,
  right: right,
)

singleChildScrollView

Wrap widget inside singleChildScrollView.

The argument accept named paramters:

  • controller
  • scrollDirection
  • primary
  • reverse
  • physics
  • dragStartBehavior
  • restorationId

Example Usage:

Niku()
  ..singleChildScrollView(
    controller,
    scrollDirection,
    primary,
    reverse,
    physics,
    dragStartBehavior,
    restorationId,
  );

Equivalent to:

singleChildScrollView(
  controller: controller,
  scrollDirection: scrollDirection,
  primary: primary,
  reverse: reverse,
  physics: physics,
  dragStartBehavior: dragStartBehavior,
  restorationId: restorationId,
);

scrollable

Shorten syntax of singleChildScrollView

Wrap widget inside singleChildScrollView.

The argument accept named paramters:

  • controller
  • scrollDirection
  • primary
  • reverse
  • physics
  • dragStartBehavior
  • restorationId

Example Usage:

Niku()
  ..scrollable(
    controller,
    scrollDirection,
    primary,
    reverse,
    physics,
    dragStartBehavior,
    restorationId,
  );

Equivalent to:

singleChildScrollView(
  controller: controller,
  scrollDirection: scrollDirection,
  primary: primary,
  reverse: reverse,
  physics: physics,
  dragStartBehavior: dragStartBehavior,
  restorationId: restorationId,
);

scrollbar

Wrap widget inside scrollbar.

The argument accept named paramters:

  • controller
  • isAlwaysShown
  • showTrackOnHover
  • hoverThickness
  • thickness
  • radius
  • notificationPredicate

Example Usage:

Niku()
  ..scrollable(
    controller,
    isAlwaysShown,
    showTrackOnHover,
    hoverThickness,
    thickness,
    radius,
    notificationPredicate,
  );

Equivalent to:

Scrollbar(
  controller: controller,
  isAlwaysShown: isAlwaysShown,
  showTrackOnHover: showTrackOnHover,
  hoverThickness: hoverThickness,
  thickness: thickness,
  radius: radius,
  notificationPredicate: notificationPredicate,
);

flexible

Wrap widget in Flexible.

Argument is optional, if non is provided, widget will be completely rounded.

Example Usage:

Niku()
  ..flexible(2);

Equivalent to:

Flexible(
  flex: input,
);

flex

Shorten syntax of flex

Wrap widget in Flexible.

Argument is optional, if non is provided, widget will be completely rounded.

Example Usage:

Niku()
  ..flexible(2);

Equivalent to:

Flexible(
  flex: input,
);

flexible

Add shadows to widget

Example Usage:

Niku()
  ..shadows([
    BoxShadow(
      color: Colors.grey.withOpacity(0.1),
      spreadRadius: 4,
      blurRadius: 8,
      offset: Offset(0, 2),
    ),
  ]);

Equivalent to:

DecoratedBox(
  child: _widget,
  decoration: BoxDecoration(
    boxShadow: input,
  ),
),

semantics

Add Semantics to widget.

The argument accept named paramters:

  • container
  • explicitChildNodes
  • excludedSemantics
  • enabled
  • checked
  • selected
  • toggled
  • button
  • slider
  • link
  • header
  • textField
  • readOnly
  • focusable
  • focused
  • inMutuallyExclusiveGroup
  • obscured
  • multiline
  • scopesRoute
  • namesRoute
  • hidden
  • image
  • liveRegion
  • maxValueLength
  • currentValueLength
  • label
  • value
  • increasedValue
  • decreasedValue
  • hint
  • onTapHint
  • onLongPressHint
  • textDirection
  • sortKey
  • tagForChildren
  • onTap
  • onLongPress
  • onScrollLeft
  • onScrollRight
  • onScrollUp
  • onScrollDown
  • onIncrease
  • onDecrease
  • onCopy
  • onCut
  • onPaste
  • onDismiss
  • onMoveCursorForwardByCharacter
  • onMoveCursorBackwardByCharacter
  • onSetSelection
  • onDidGainAccessibilityFocus
  • onDidLoseAccessibilityFocus
  • customSemanticsActions

Example Usage:

Niku()
  ..semantics(
    enabled: true,
    label: "A card"
  );

Equivalent to:

Semantics(
  container: container,
  explicitChildNodes: explicitChildNodes,
  excludeSemantics: excludeSemantics,
  enabled: enabled,
  checked: checked,
  selected: selected,
  toggled: toggled,
  button: button,
  slider: slider,
  link: link,
  header: header,
  textField: textField,
  readOnly: readOnly,
  focusable: focusable,
  focused: focused,
  inMutuallyExclusiveGroup: inMutuallyExclusiveGroup,
  obscured: obscured,
  multiline: multiline,
  scopesRoute: scopesRoute,
  namesRoute: namesRoute,
  hidden: hidden,
  image: image,
  liveRegion: liveRegion,
  maxValueLength: maxValueLength,
  currentValueLength: currentValueLength,
  label: label,
  value: value,
  increasedValue: increasedValue,
  decreasedValue: decreasedValue,
  hint: hint,
  onTapHint: onTapHint,
  onLongPressHint: onLongPressHint,
  textDirection: textDirection,
  sortKey: sortKey,
  tagForChildren: tagForChildren,
  onTap: onTap,
  onLongPress: onLongPress,
  onScrollLeft: onScrollLeft,
  onScrollRight: onScrollRight,
  onScrollUp: onScrollUp,
  onScrollDown: onScrollDown,
  onIncrease: onIncrease,
  onDecrease: onDecrease,
  onCopy: onCopy,
  onCut: onCut,
  onPaste: onPaste,
  onDismiss: onDismiss,
  onMoveCursorForwardByCharacter: onMoveCursorForwardByCharacter,
  onMoveCursorBackwardByCharacter: onMoveCursorBackwardByCharacter,
  onSetSelection: onSetSelection,
  onDidGainAccessibilityFocus: onDidGainAccessibilityFocus,
  onDidLoseAccessibilityFocus: onDidLoseAccessibilityFocus,
  customSemanticsActions: customSemanticsActions,
);

animatedBuilder

Add AnimatedBuilder

The argument accept named paramters:

  • animation
  • builder

Example Usage:

Niku()
  ..animatedBuilder(
    animation: controller,
    builder: (context, child) {
      return Container(
        width: controller.value,
        child: child,
      );
    },
  );

Equivalent to:

AnimatedBuilder(
  animation: controller,
  builder: builder,
)

animated

Shorten syntax of animamtedBuilder

Add AnimatedBuilder

The arguments accept:

  • animation
  • builder

Example Usage:

Niku()
  ..animated(
    controller,
    (context, child) {
      return Container(
        width: controller.value,
        child: child,
      );
    },
  );

Equivalent to:

AnimatedBuilder(
  animation: input1,
  builder: input2,
)

form

Wrap widget in Form.

The arguments accept:

  • key
  • autovalidateMode
  • onWillPop
  • onChanged

Example Usage:

final formKey = GlobalKey<FormState>();

Niku()
  ..form(
    key: formKey,
  );

Equivalent to:

AnimatedBuilder(
  animation: input1,
  builder: input2,
)

on

Wrap widget in GestureDetector.

The argument accept named paramters:

  • tapDown
  • tapUp
  • tap
  • tapCancel
  • secondaryTap
  • secondaryTapDown
  • secondaryTapUp
  • secondaryTapCancel
  • tertiaryTapDown
  • tertiaryTapUp
  • tertiaryTapCancel
  • doubleTapDown
  • doubleTap
  • doubleTapCancel
  • longPress
  • longPressStart
  • longPressMoveUpdate
  • longPressUp
  • longPressEnd
  • secondaryLongPress
  • secondaryLongPressStart
  • secondaryLongPressMoveUpdate
  • secondaryLongPressUp
  • secondaryLongPressEnd
  • verticalDragDown
  • verticalDragStart
  • verticalDragUpdate
  • verticalDragEnd
  • verticalDragCancel
  • horizontalDragDown
  • horizontalDragStart
  • horizontalDragUpdate
  • horizontalDragEnd
  • horizontalDragCancel
  • forcePressStart
  • forcePressPeak
  • forcePressUpdate
  • forcePressEnd
  • panDown
  • panStart
  • panUpdate
  • panEnd
  • panCancel
  • scaleStart
  • scaleUpdate

Example Usage:

Niku()
  ..on(
    tap: () {
      print("Tap");
    }
  );

Equivalent to:

GestureDetector(
  onTapDown: tapDown,
  onTapUp: tapUp,
  onTap: tap,
  onTapCancel: tapCancel,
  onSecondaryTap: secondaryTap,
  onSecondaryTapDown: secondaryTapDown,
  onSecondaryTapUp: secondaryTapUp,
  onSecondaryTapCancel: secondaryTapCancel,
  onTertiaryTapDown: tertiaryTapDown,
  onTertiaryTapUp: tertiaryTapUp,
  onTertiaryTapCancel: tertiaryTapCancel,
  onDoubleTapDown: doubleTapDown,
  onDoubleTap: doubleTap,
  onDoubleTapCancel: doubleTapCancel,
  onLongPress: longPress,
  onLongPressStart: longPressStart,
  onLongPressMoveUpdate: longPressMoveUpdate,
  onLongPressUp: longPressUp,
  onLongPressEnd: longPressEnd,
  onSecondaryLongPress: secondaryLongPress,
  onSecondaryLongPressStart: secondaryLongPressStart,
  onSecondaryLongPressMoveUpdate: secondaryLongPressMoveUpdate,
  onSecondaryLongPressUp: secondaryLongPressUp,
  onSecondaryLongPressEnd: secondaryLongPressEnd,
  onVerticalDragDown: verticalDragDown,
  onVerticalDragStart: verticalDragStart,
  onVerticalDragUpdate: verticalDragUpdate,
  onVerticalDragEnd: verticalDragEnd,
  onVerticalDragCancel: verticalDragCancel,
  onHorizontalDragDown: horizontalDragDown,
  onHorizontalDragStart: horizontalDragStart,
  onHorizontalDragUpdate: horizontalDragUpdate,
  onHorizontalDragEnd: horizontalDragEnd,
  onHorizontalDragCancel: horizontalDragCancel,
  onForcePressStart: forcePressStart,
  onForcePressPeak: forcePressPeak,
  onForcePressUpdate: forcePressUpdate,
  onForcePressEnd: forcePressEnd,
  onPanDown: panDown,
  onPanStart: panStart,
  onPanUpdate: panUpdate,
  onPanEnd: panEnd,
  onPanCancel: panCancel,
  onScaleStart: scaleStart,
  onScaleUpdate: scaleUpdate,
);