flutter_input 1.1.2

This package provides widgets for input fields. Each widget can be used standalone or within a form.

Flutter Input Widgets - Standalone or within a Form → flutter_input

This package provides input widgets (fields) to manipulate data. All input widgets share a common set of parameters. A list of validators (see below) can be attached to any input widget. Each input widget can be used standalone or attached to the InputForm. The InputForm provides methods to enable(), reset(), save() or validate() all fields at once which are attached to the form.

Input Widgets

The following input widgets are included. See section Development below for building your own input widget.

• InputCheckbox - Checkbox for data type bool
• InputCountry - Dropdown to select a country (shows flags)
• InputDate - Calendar based selection for data type DateTime (date part only)
• InputDatePicker - A highly customizable date picker with week of year and multiple swipe actions
• InputDateTime - Wheels for data type DateTime can be customized for date only, time only or both
• InputDropDown<T> - Dropdown button for data type T
• InputFavorite - A favorite button with selectable icon for data type bool
• InputKeyboard - Text input for data type String, int or double
• InputLanguage - Dropdown to select a language (Locale)
• InputRadio<T> - Radio button to select one value of type T
• InputRating - Rating widget with selectable icons and a range slider for data type int
• InputSlider - Slider for data type double between a minimum and maximum value
• InputSpinner - Spinner with buttons for data type double to decrease or increase a value between a minimum and maximum
• InputSwitch - Switch for data type bool

Demo

For a complete example see example/main.dart.

InputDatePicker

The highly customizable InputDatePicker allows you to choose a date from a calendar page which also shows the week of the year. It provides spinners, swipes and a dropdown to select the month. The year can even be entered as text. All parts can be customized by DatePickerStyles.

Usage

All input widgets share a common set of parameters. All parameters are named and optional.

• Key key
• bool autovalidate = false - automatically validates
• InputDecoration decoration - e.g. for a label
• bool enabled - to protect the field against changes. Overrides setting of the Form
• T initialValue - to set the fields initial value. Overrides using the value from the forms map.
• ValueSetter
• ValueSetter
• String path - to access the form map
• List

Validators

The following validators can be given to parameter validators of an input widget. Each validator accepts the optional parameter message to set an individual error message if the validation fails.

• after(DateTime date) - validates that the field value is after date
• before(DateTime date) - validates that the field value is before date
• future - validates that the DateTime field value lies in the future
• max(num maxVal) - validates that the num field value is not larger than maxVal
• maxLen(num maxLen) - validates that the length of the String field value is not longer than maxLen
• min(num minVal) - validates that the num field value is not smaller than minVal
• minLen(num minLen) - validates that the length of the String field value is not shorter than minLen
• notNull - validates the the field value is not empty
• past - validates that the DateTime field value lies in the past

Development

To create a new input field for data type T follow these steps:

1. Copy one of the included class files.
2. Rename the class widget and its state to your new one.
3. Replace T with the value type of your new input field.
4. Adapt parameters and leave the call to super() with all the common parameters.
5. Adapt method build( BuildContext context) in the state class. It must end with return super.buildInputField( context, ... where ... is the code to display your new field widget.

Utilities

This package also contains some utilities.

• InputUtils.convertToType() converts a value to a given target type.
• InputUtils.readFromJson() reads a value from a nested map.
• InputUtils.writeToJson() writes a value into a nested map.
• See date_helper.dart for extensions on DateTime for weekOfYear, julianDay and more.

To Do

• [X] create a customizable calendar picker with week numbers
• [X] create a text input field for int and double
• [ ] create an input widget for a calendar with events
• [ ] create an input widget to select multiple choices like a multi-select list
• [ ] add some images to this documentation
• [X] internationalize the whole package
• [X] create an input widget to change the language within the app