Input Fields

The Flood toolkit provides a collection of customizable and user-friendly input field components that simplify the process of capturing user input in a visually consistent manner. These components include StyledTextField, StyledReadonlyTextField, StyledCheckbox, StyledDateTimeField, StyledOptionField, and StyledRadioField. Each component offers a range of properties and callbacks to customize its appearance and behavior, ensuring a seamless integration with your application's design.

StyledTextField

StyledTextField is a versatile input field component that allows users to enter and edit text. It supports various customization options, including labelText, hintText, leadingIcon, and keyboard type. The onChanged callback can be used to react to changes in the text field's value.

StyledTextField(
  labelText: 'Text Field',
  hintText: 'Input an email',
  leadingIcon: Icons.text_fields,
  keyboard: TextInputType.emailAddress,
  onChanged: (newText) {},
 
  // The properties below define "suggestions", which appear underneath the text-field as the user types.
  suggestionsGetter: (text) => mySuggestionService.suggest(text), // Asynchronously loads suggestions based on the current text.
  suggestionsDebounceDuration: Duration.zero, // By default 400ms
  suggestionBuilder: (suggestion) => StyledText.sm.display.bold(state), // How to render the suggestions. By default, just a StyledText.body.
  onSuggestionPressed: (suggestion, controller) { // Action when suggestion is pressed. By default, just sets the text of the `controller` to the suggestion.
    controller.text = suggestion;
    print('Suggestion selected: $suggestion');
  },
),

StyledReadonlyTextField

StyledReadonlyTextField is a read-only variant of StyledTextField that displays a non-editable text value. It is useful for presenting information that should not be modified by the user. The component supports properties like labelText, text, and errorText to customize its appearance and convey any error states.

StyledReadonlyTextField(
  labelText: 'Read-only',
  text: 'This value cannot be changed manually.',
  errorText: 'An error!',
),

StyledDisabledTextField

StyledDisabledTextField is a disabled variant of StyledTextField that displays a non-editable text value, while also making it obvious to users that its value cannot be edited. It is useful for presenting information that should not be modified by the user. The component supports properties like labelText, text, and errorText to customize its appearance and convey any error states.

StyledDisabledTextField(
  labelText: 'Disabled',
  text: 'This value cannot be changed manually.',
),

StyledCheckbox

StyledCheckbox is a checkbox component that allows users to toggle a boolean value. It provides a value property to define the current state and an onChanged callback to handle changes. The labelText property can be used to associate a label with the checkbox.

StyledList.row.centered(
  children: [
    StyledCheckbox(
      value: false,
      labelText: 'Unchecked',
      onChanged: (newValue) {},
    ),
    StyledCheckbox(
      value: true,
      labelText: 'Checked',
      onChanged: (newValue) {},
    )
  ],
),

StyledDateTimeField

StyledDateTimeField is an input field component specifically designed for selecting date and time values. It provides a value property to set the initial date and time, and an onChanged callback to handle changes. The labelText property can be used to provide a label for the field.

StyledDateTimeField(
  labelText: 'Date Field',
  value: DateTime.now(),
  onChanged: (newValue) {},
),

StyledOptionField

StyledOptionField is a dropdown-style input field that allows users to select a value from a predefined set of options. It provides a value property to set the currently selected option, an options property to define the available choices, and an onChanged callback to handle changes. The labelText property can be used to provide a label for the field.

StyledOptionField(
  labelText: 'Options',
  value: 'Option 1',
  options: [
    'Option 1',
    'Option 2',
    'Option 3',
  ],
  onChanged: (newValue) {},
),

StyledRadioField

StyledRadioField is a radio button component that allows users to select a single value from a group of options. It provides a value property to set the currently selected option and an options property to define the available choices.

StyledList.row.centered(
  children: [
    StyledRadioField(
      value: 'On',
      options: ['Off', 'On'],
    ),
  ],
),

These input field components provide a consistent and intuitive way to capture user input while maintaining visual coherence throughout your application. By leveraging their customization options and callbacks, you can create interactive and engaging user interfaces with ease.

Example

This code sample includes a few of the input fields in one page:

StyledTextField(
  labelText: 'Text Field',
  hintText: 'Input an email',
  leadingIcon: Icons.text_fields,
  keyboard: TextInputType.emailAddress,
  onChanged: (newText) {},
),
StyledReadonlyTextField(
  labelText: 'Read-only',
  text: 'This value cannot be changed manually.',
  errorText: 'An error!',
),
StyledList.row.centered(
  children: [
    StyledCheckbox(
      value: false,
      labelText: 'Unchecked',
      onChanged: (newValue) {},
    ),
    StyledCheckbox(
      value: true,
      labelText: 'Checked',
      onChanged: (newValue) {},
    )
  ],
),
StyledDateTimeField(
  labelText: 'Date Field',
  value: DateTime.now(),
  onChanged: (newValue) {},
),
StyledOptionField(
  labelText: 'Options',
  value: 'Option 1',
  options: [
    'Option 1',
    'Option 2',
    'Option 3',
  ],
  onChanged: (newValue) {},
),
StyledList.row.centered(
  children: [
    StyledRadioField(
      value: 'On',
      options: ['Off', 'On'],
    ),
  ],
),