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
-
- Object
- DiagnosticableTree
- Widget
- StatelessWidget
- OnFormFieldBuilder
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
- 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
-
build(
BuildContext context) → Widget -
Describes the part of the user interface represented by this widget.
override
-
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
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
toDiagnosticsNode(
{String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode -
Returns a debug representation of the object that is used by debugging
tools and by DiagnosticsNode.toStringDeep.
inherited
-
toString(
{DiagnosticLevel minLevel = DiagnosticLevel.info}) → String -
A string representation of this object.
inherited
-
toStringDeep(
{String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → 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
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited