OnFormFieldBuilder<T> class

Listen to an InjectedFormField and define its corresponding input fields

Examples

Checkbox

  final myCheckBox = RM.injectFormField<bool>(false);

  //In the widget tree
  OnFormFieldBuilder<bool>(
   listenTo: myCheckBox,
   builder: (value, onChanged) {
     return CheckboxListTile(
       value: value,
       onChanged: onChanged,
       title: Text('I accept the licence'),
     );
   },
  ),

Switch

    final switcher = RM.injectFormField(false);

    OnFormFieldBuilder<bool>(
      listenTo: switcher,
      inputDecoration: InputDecoration(
        labelText: 'switcher label',
        hintText: 'switcher hint',
        helperText: 'switcher helper text',
        suffixIcon: dropdownMenu.hasError
            ? const Icon(Icons.error, color: Colors.red)
            : const Icon(Icons.check, color: Colors.green),
      ),
      builder: (val, onChanged) {
        return SwitchListTile(
          value: val,
          onChanged: onChanged,
          title: Text('I Accept the terms and conditions'),
        );
      },
    ),
  ),

Date picker

  final dateTime = RM.injectFormField<DateTime?>(
    null,
    validators: [
      (date) {
        if (date == null || date.isAfter(DateTime.now())) {
          return 'Not allowed';
        }
      }
    ],
    validateOnLoseFocus: true,
  );


  OnFormFieldBuilder(
    listenTo: dateTime,
    inputDecoration: InputDecoration(
      labelText: 'DatePicker label',
      hintText: 'DatePicker hint',
      helperText: 'DatePicker helper text',
    ),
    builder: (value, onChanged) => ListTile(
      dense: true,
      title: Text('${value ?? ''}'),
      //clear the state
      trailing: IconButton(
        icon: Icon(Icons.clear),
        onPressed: () => dateTime.value = null,
      ),
      onTap: () async {
        final result = await showDatePicker(
          context: context,
          initialDate: dateTime.value ?? DateTime.now(),
          firstDate: DateTime(2000, 1, 1),
          lastDate: DateTime(2040, 1, 1),
        );
        if (result != null) {
          dateTime.value = result;
        }
      },
    ),
  ),

Date range picker

final dateTimeRange = RM.injectFormField<DateTimeRange?>(null);

OnFormFieldBuilder<DateTimeRange?>(
  listenTo: dateTimeRange,
  inputDecoration: InputDecoration(
    labelText: 'DateRangePicker label',
    hintText: 'DateRangePicker hint',
    helperText: 'DateRangePicker helper text',
  ),
  builder: (value, onChanged) {
    return ListTile(
      dense: true,
      title: Text('${value ?? ''}'),
      trailing: IconButton(
        icon: Icon(Icons.close),
        onPressed: () {
          dateTimeRange.value = null;
        },
      ),
      onTap: () async {
        final result = await showDateRangePicker(
          context: context,
          firstDate: DateTime(2000, 1, 1),
          lastDate: DateTime(2040, 1, 1),
        );
        if (result != null) {
          dateTimeRange.value = result;
        }
      },
    );
  },
),

Slider

final slider = RM.injectFormField<double>(
    6.0,
    validators: [
      (value) {
        if (value < 6.0) {
          return 'Not allowed';
        }
      }
    ],
  );

OnFormFieldBuilder<double>(
  listenTo: slider,
  autofocus: true,
  inputDecoration: InputDecoration(
    labelText: 'Slider label',
    hintText: 'Slider hint',
    helperText: 'Slider helper text: ${slider.value}',
  ),
  builder: (value, onChanged) {
    return Slider(
      value: value,
      onChanged: onChanged,
      min: 0.0,
      max: 10.0,
    );
  },
),

RangeSlider

  OnFormFieldBuilder<RangeValues>(
    listenTo: rangeSlider,
    inputDecoration: InputDecoration(
      labelText: 'Slider label',
      hintText: 'Slider hint',
      helperText: 'Slider helper text',
    ),
    builder: (value, onChanged) {
      return RangeSlider(
        values: value,
        onChanged: onChanged,
        min: 0.0,
        max: 100.0,
        divisions: 20,
      );
    },
  ),

DropdownButton

  const genders = ['Male', 'Female', 'Other'];
  final dropdownMenu = RM.injectFormField<String?>(null);
  OnFormFieldBuilder<String?>(
    listenTo: dropdownMenu,
    inputDecoration: InputDecoration(
      labelText: 'DropDownMenu label',
      hintText: 'DropDownMenu hint',
      helperText: 'DropDownMenu helper text',
      suffixIcon: dropdownMenu.hasError
          ? const Icon(Icons.error, color: Colors.red)
          : const Icon(Icons.check, color: Colors.green),
    ),
    builder: (val, onChanged) {
      return DropdownButtonHideUnderline(
        child: DropdownButton<String>(
          value: val,
          items: genders
              .map(
                (gender) => DropdownMenuItem(
                  value: gender,
                  child: Text(gender),
                ),
              )
              .toList(),
          onChanged: onChanged,
        ),
      );
    },
  ),

Radio Options

  final radioOptions = ['Dart', 'Kotlin', 'Java', 'Swift', 'Objective-C'];
  final radioButtons = RM.injectFormField<String>('');
  OnFormFieldBuilder<String>(
    listenTo: radioButtons,
    inputDecoration: InputDecoration(
      labelText: 'Radio buttons label',
      hintText: 'Radio buttons hint',
      helperText: 'Radio buttons helper text',
      suffixIcon: radioButtons.hasError
          ? const Icon(Icons.error, color: Colors.red)
          : const Icon(Icons.check, color: Colors.green),
    ),
    builder: (val, onChanged) {
      return Row(
        children: radioOptions
            .map(
              (e) => InkWell(
                onTap: () => radioButtons.onChanged(e),
                child: Row(
                  children: [
                    Radio<String>(
                      value: e,
                      groupValue: val,
                      onChanged: onChanged,
                    ),
                    Text(e),
                    const SizedBox(width: 8),
                  ],
                ),
              ),
            )
            .toList(),
      );
    },
  ),

Multi Check Boxes

    final multiCheckBoxes = RM.injectFormField<List<String>>(
      [],
      validators: [
        (val) {
          if (val.length < 3) {
            return 'choose more than three items';
          }
        }
      ],
    );


  OnFormFieldBuilder<List<String>>(
    listenTo: multiCheckBoxes,
    inputDecoration: InputDecoration(
      labelText: 'multiCheckBoxes label',
      hintText: 'multiCheckBoxes hint',
      helperText: 'multiCheckBoxes helper text',
    ),
    builder: (val, onChanged) {
      return Row(
        children: radioOptions
            .map(
              (e) => Row(
                  children: [
                    Checkbox(
                      value: val.contains(e),
                      onChanged: (checked) {
                        if (checked!) {
                          multiCheckBoxes.value = [...val, e];
                        } else {
                          multiCheckBoxes.value =
                              val.where((el) => e != el).toList();
                        }
                      },
                    ),
                    Text(e),
                    const SizedBox(width: 8),
                  ],
                ),
            )
            .toList(),
      );
    },
  ),

Inheritance

Available extensions

Constructors

OnFormFieldBuilder({Key? key, required InjectedFormField<T> listenTo, required Widget builder(T value, void onChanged(T?)), InputDecoration? inputDecoration = const InputDecoration(), bool autofocus = false, bool enableBorder = false, TextStyle? style}): Listen to an InjectedFormField and define its corresponding input fields

Properties

autofocus → bool: Whether this text field should focus itself if nothing else is already focused.
final
builder → Widget Function(T value, void onChanged(T?)): Builder to be called each time the InjectedFormField emits a notification.
final
enableBorder → bool: By default InputDecorator borders are set to none.
final
hashCode → int: The hash code for this object.
no setterinherited
inputDecoration → InputDecoration?: The decoration to show around the form field.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
listenTo → InjectedFormField<T>: InjectedFormField to listen to.
final
makeRefreshable → Widget: Available on Widget?, provided by the WidgetExtension extension
Make your any widget refreshable with RefreshIndicator on top
no setter
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
style → TextStyle?: The style to use for the text being edited.
final

Methods

addMaterialWidget() → Material: Available on Widget, provided by the GenericExtensions extension
addTooltipWidget(String toolTip) → Tooltip: Available on Widget, provided by the GenericExtensions extension
borderRadius([BorderRadiusGeometry? borderRadius]) → Widget: Available on Widget, provided by the GenericExtensions extension
boxDecoration([BoxDecoration? boxDecoration]) → Widget: Available on Widget, provided by the GenericExtensions extension
build(BuildContext context) → Widget: Describes the part of the user interface represented by this widget.
override
center({double? heightFactor, double? widthFactor}) → Widget: Available on Widget?, provided by the WidgetExtension extension
set parent widget in center
colorFilter([ColorFilter? colorFilter]) → Widget: Available on Widget, provided by the GenericExtensions extension
set parent widget in center
cornerRadiusWithClipRRect(double radius) → ClipRRect: Available on Widget?, provided by the WidgetExtension extension
add corner radius
cornerRadiusWithClipRRectOnly({int bottomLeft = 0, int bottomRight = 0, int topLeft = 0, int topRight = 0}) → ClipRRect: Available on Widget?, provided by the WidgetExtension extension
add custom corner radius each side
createElement() → StatelessElement: Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
expand({int flex = 1}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add Expanded to parent widget
fit({BoxFit? fit, AlignmentGeometry? alignment}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add FittedBox to parent widget
flexible({int flex = 1, FlexFit? fit}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add Flexible to parent widget
launch<T>(BuildContext context, {bool isNewTask = false, PageRouteAnimation? pageRouteAnimation, Duration? duration, String? routeName, Object? routeArguments}) → Future<T?>: Available on Widget?, provided by the WidgetExtension extension
Launch a new screen
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
onTap(Function? function, {BorderRadius? borderRadius, Color? splashColor, Color? hoverColor, Color? highlightColor, Color? focusColor, WidgetStateProperty<Color?>? overlayColor}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add tap to parent widget
opacity({required double opacity, int durationInSecond = 1, Duration? duration}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add opacity to parent widget
paddingAll(double padding) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding all
paddingBottom(double bottom) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding bottom
paddingDirectional({double start = 0.0, double top = 0.0, double end = 0.0, double bottom = 0.0}) → Widget: Available on Widget?, provided by the WidgetExtension extension
paddingLeft(double left) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding left
paddingOnly({double top = 0.0, double left = 0.0, double bottom = 0.0, double right = 0.0}) → Padding: Available on Widget?, provided by the WidgetExtension extension
return custom padding from each side
paddingRight(double right) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding right
paddingSymmetric({double vertical = 0.0, double horizontal = 0.0}) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding symmetric
paddingTop(double top) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding top
rotate({required double angle, bool transformHitTests = true, Offset? origin}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add rotation to parent widget
scale({required double scale, Offset? origin, AlignmentGeometry? alignment, bool transformHitTests = true}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add scaling to parent widget
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
tooltip({required String msg}) → Widget: Available on Widget?, provided by the WidgetExtension extension
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited
translate({required Offset offset, bool transformHitTests = true, Key? key}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add translate to parent widget
validate({Widget value = const SizedBox()}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Validate given widget is not null and returns given value if null.
visible(bool visible, {Widget? defaultWidget}) → Widget: Available on Widget?, provided by the WidgetExtension extension
set visibility
withHeight(double height) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom height
withRoundedCorners({Color backgroundColor = whiteColor, BorderRadius borderRadius = const BorderRadius.all(Radius.circular(8.0)), LinearGradient? gradient, BoxBorder? border, List<BoxShadow>? boxShadow, DecorationImage? decorationImage, BoxShape boxShape = BoxShape.rectangle}) → Container: Available on Widget?, provided by the WidgetExtension extension
withScroll({ScrollPhysics? physics, EdgeInsetsGeometry? padding, Axis scrollDirection = Axis.vertical, ScrollController? controller, DragStartBehavior dragStartBehavior = DragStartBehavior.start, bool? primary, required bool reverse}) → Widget: Available on Widget?, provided by the WidgetExtension extension
withShaderMask(List<Color> colors, {BlendMode blendMode = BlendMode.srcATop}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Wrap with ShaderMask widget
withShaderMaskGradient(Gradient gradient, {BlendMode blendMode = BlendMode.srcATop}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Wrap with ShaderMask widget Gradient
withShadow({Color bgColor = whiteColor, Color shadowColor = Colors.black12, dynamic blurRadius = 10.0, dynamic spreadRadius = 0.0, Offset offset = const Offset(0.0, 0.0), LinearGradient? gradient, BoxBorder? border, DecorationImage? decorationImage, BoxShape boxShape = BoxShape.rectangle}) → Container: Available on Widget?, provided by the WidgetExtension extension
withSize({double width = 0.0, double height = 0.0}) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom height and width
withTooltip({required String msg}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Validate given widget is not null and returns given value if null.
withVisibility(bool visible, {Widget? replacement, bool maintainAnimation = false, bool maintainState = false, bool maintainSize = false, bool maintainSemantics = false, bool maintainInteractivity = false}) → Visibility: Available on Widget?, provided by the WidgetExtension extension
set widget visibility
withWidth(double width) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom width

Operators

operator ==(Object other) → bool: The equality operator.
inherited

OnFormFieldBuilder<T> class

Examples

Checkbox

Switch

Date picker

Date range picker

Slider

RangeSlider

DropdownButton

Radio Options

Multi Check Boxes

Constructors

Properties

Methods

Operators

s_gridview library