TextField

Starting Flutter example…

Live Flutter from this checkout’s component catalog. Examples include Fortal styling; the source tab shows the catalog code, not a standalone application.

A text input component for collecting user text input with labels, hints, and helper text.

When to use this

Form inputs: Collect text data in forms (names, emails, addresses)
Search fields: Enable users to enter search queries
Comments: Allow users to enter text comments or feedback
Data entry: Capture any text-based user input

Basic implementation

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

class TextfieldExample extends StatefulWidget {
  const TextfieldExample({super.key});

  @override
  State<TextfieldExample> createState() => _TextfieldExampleState();
}

class _TextfieldExampleState extends State<TextfieldExample> {
  final controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 300,
      child: RemixTextField(
        controller: controller,
        hintText: 'Placeholder',
        label: 'Label',
        helperText: 'Required field',
        style: style,
      ),
    );
  }

  TextFieldStyler get style {
    return TextFieldStyler()
        .color(Colors.grey.shade800)
        .color(Colors.white)
        .borderRadius(.all(const Radius.circular(8.0)))
        .height(44)
        .padding(.horizontal(12))
        .spacing(8)
        .label(
          TextStyler()
              .color(Colors.blueGrey.shade900)
              .fontWeight(FontWeight.w500),
        )
        .helperText(
          TextStyler()
              .fontWeight(FontWeight.w300)
              .color(Colors.blueGrey.shade600),
        )
        .hintColor(Colors.blueGrey.shade500)
        .shadow(
          BoxShadowMix()
              .blurRadius(1)
              .color(Colors.black12)
              .offset(x: 0, y: 1),
        )
        .border(
          BoxBorderMix.all(BorderSideMix(color: Colors.grey.shade300)),
        )
        .onFocused(
          TextFieldStyler().border(
            BoxBorderMix.all(
              BorderSideMix()
                  .color(Colors.deepPurpleAccent)
                  .width(3)
                  .strokeAlign(BorderSide.strokeAlignCenter),
            ),
          ),
        );
  }
}

Fortal widgets

The application-owned Fortal preset provides a themed widget for this component:

Fortal variants

import 'package:flutter/material.dart';
import 'ui/ui.dart';

class FortalTextFieldExample extends StatefulWidget {
  const FortalTextFieldExample({super.key});

  @override
  State<FortalTextFieldExample> createState() => _FortalTextFieldExampleState();
}

class _FortalTextFieldExampleState extends State<FortalTextFieldExample> {
  final controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      spacing: 16,
      children: [
        FortalTextField.surface(
          controller: controller,
          label: 'Surface',
          hintText: 'Neutral surface field',
        ),
        FortalTextField.soft(
          controller: controller,
          label: 'Soft',
          hintText: 'Accent soft field',
        ),
      ],
    );
  }
}

See the fortalTextFieldStyle source code for all available options.

Constructor

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:remix/remix.dart';

RemixTextField remixTextFieldConstructor({
  Key? key,
  TextEditingController? controller,
  FocusNode? focusNode,
  String? label,
  String? hintText,
  String? helperText,
  bool error = false,
  TextInputType? keyboardType,
  TextInputAction? textInputAction,
  TextCapitalization textCapitalization = TextCapitalization.none,
  TextDirection? textDirection,
  bool obscureText = false,
  bool enabled = true,
  bool readOnly = false,
  bool autofocus = false,
  int? maxLines = 1,
  int? minLines,
  bool expands = false,
  int? maxLength,
  MaxLengthEnforcement? maxLengthEnforcement,
  ValueChanged<String>? onChanged,
  VoidCallback? onEditingComplete,
  ValueChanged<String>? onSubmitted,
  AppPrivateCommandCallback? onAppPrivateCommand,
  List<TextInputFormatter>? inputFormatters,
  bool? showCursor,
  String obscuringCharacter = '•',
  bool autocorrect = true,
  bool enableSuggestions = true,
  SmartDashesType? smartDashesType,
  SmartQuotesType? smartQuotesType,
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  bool enableInteractiveSelection = true,
  TextSelectionControls? selectionControls,
  GestureTapCallback? onTap,
  TapRegionCallback? onTapOutside,
  TapRegionUpCallback? onPressUpOutside,
  bool onTapAlwaysCalled = false,
  ScrollController? scrollController,
  ScrollPhysics? scrollPhysics,
  Iterable<String>? autofillHints,
  ContentInsertionConfiguration? contentInsertionConfiguration,
  Clip clipBehavior = Clip.hardEdge,
  String? restorationId,
  bool stylusHandwritingEnabled = true,
  bool enableIMEPersonalizedLearning = true,
  EditableTextContextMenuBuilder? contextMenuBuilder,
  SpellCheckConfiguration? spellCheckConfiguration,
  TextMagnifierConfiguration? magnifierConfiguration,
  bool canRequestFocus = true,
  bool? ignorePointers,
  UndoHistoryController? undoController,
  Object groupId = EditableText,
  Widget? leading,
  Widget? trailing,
  String? semanticLabel,
  String? semanticHint,
  bool excludeSemantics = false,
  TextFieldStyler style = const TextFieldStyler.create(),
  TextFieldSpec? styleSpec,
}) => throw UnimplementedError();

Properties

`key` → `Key?`

Optional. Controls how one widget replaces another widget in the tree.

`controller` → `TextEditingController?`

Optional. Controls the text being edited.

`focusNode` → `FocusNode?`

Optional. Defines the keyboard focus for this widget.

`keyboardType` → `TextInputType?`

Optional. The type of keyboard to use for editing the text.

`textInputAction` → `TextInputAction?`

Optional. The type of action button to use for the keyboard.

`textCapitalization` → `TextCapitalization`

Optional. Configures how the platform keyboard will select an uppercase or lowercase keyboard.

`textDirection` → `TextDirection?`

Optional. The directionality of the text.

`readOnly` → `bool`

Optional. Whether the text can be changed.

`autofocus` → `bool`

Optional. Whether this text field should focus itself if nothing else is already focused.

`obscuringCharacter` → `String`

Optional. Character used for obscuring text if obscureText is true.

`obscureText` → `bool`

Optional. Whether to hide the text being edited.

`autocorrect` → `bool`

Optional. Whether to enable autocorrect.

`enableSuggestions` → `bool`

Optional. Whether to show input suggestions as the user types.

`smartDashesType` → `SmartDashesType?`

Optional. Configuration for smart dashes.

`smartQuotesType` → `SmartQuotesType?`

Optional. Configuration for smart quotes.

`maxLines` → `int?`

Optional. The maximum number of lines for the text to span.

`minLines` → `int?`

Optional. The minimum number of lines to occupy when the content spans fewer lines.

`expands` → `bool`

Optional. Whether this widget's height will be sized to fill its parent.

`maxLength` → `int?`

Optional. The maximum number of characters to allow in the text field.

`maxLengthEnforcement` → `MaxLengthEnforcement?`

Optional. How the maxLength limit should be enforced.

`onChanged` → `ValueChanged<String>?`

Optional. Called when the user initiates a change to the TextField's value.

`onEditingComplete` → `VoidCallback?`

Optional. Called when the user submits editable content.

`onSubmitted` → `ValueChanged<String>?`

Optional. Called when the user indicates that they are done editing the text in the field.

`onAppPrivateCommand` → `AppPrivateCommandCallback?`

Optional. This is used to receive a private command from the input method.

`inputFormatters` → `List<TextInputFormatter>?`

Optional. Optional input formatters.

`enabled` → `bool`

Optional. Whether the text field is enabled.

`dragStartBehavior` → `DragStartBehavior`

Optional. Defines how to handle drag start behavior.

`enableInteractiveSelection` → `bool`

Optional. Whether to enable user interface affordances for changing the text selection.

`selectionControls` → `TextSelectionControls?`

Optional. Optional delegate for building the text selection handles and toolbar.

`onTap` → `GestureTapCallback?`

Optional. Called when the text field is tapped.

`onTapOutside` → `TapRegionCallback?`

Optional. Called when the user taps outside of this text field.

`onPressUpOutside` → `TapRegionUpCallback?`

Optional. Called when tap up is detected outside of this text field.

`onTapAlwaysCalled` → `bool`

Optional. Whether onTap should be called for every tap.

`scrollController` → `ScrollController?`

Optional. The ScrollController to use when vertically scrolling the input.

`scrollPhysics` → `ScrollPhysics?`

Optional. The ScrollPhysics to use when vertically scrolling the input.

`autofillHints` → `Iterable<String>?`

Optional. A list of strings that helps the autofill service identify the type of this text input.

`contentInsertionConfiguration` → `ContentInsertionConfiguration?`

Optional. Configuration for content insertion.

`clipBehavior` → `Clip`

Optional. The content will be clipped (or not) according to this option.

`restorationId` → `String?`

Optional. Restoration ID to save and restore the state of the text field.

`stylusHandwritingEnabled` → `bool`

Optional. Whether stylus handwriting is enabled.

`enableIMEPersonalizedLearning` → `bool`

Optional. Whether to enable that the IME update personalized data.

`contextMenuBuilder` → `EditableTextContextMenuBuilder?`

Optional. A context menu builder for the text field.

`spellCheckConfiguration` → `SpellCheckConfiguration?`

Optional. Configuration for spell checking.

`magnifierConfiguration` → `TextMagnifierConfiguration?`

Optional. Configuration for text magnification.

`canRequestFocus` → `bool`

Optional. Whether this text field can request focus.

`ignorePointers` → `bool?`

Optional. Whether to ignore pointer events.

`undoController` → `UndoHistoryController?`

Optional. Undo controller for managing undo/redo operations.

`groupId` → `Object`

Optional. The group ID for the text field.

`hintText` → `String?`

Optional. Hint text to display when the text field is empty.

`helperText` → `String?`

Optional. Helper text to display below the text field.

`label` → `String?`

Optional. Label text to display above the text field.

`error` → `bool`

Optional. Whether the text field is in error state.

`styleSpec` → `TextFieldSpec?`

Optional. The style spec for the text field.

Optional. A widget to display at the leading edge of the text field.

Optional. A widget to display at the trailing edge of the text field.

`semanticLabel` → `String?`

Optional. The semantic label for the text field.

`semanticHint` → `String?`

Optional. The semantic hint for the text field.

`excludeSemantics` → `bool`

Optional. Whether to exclude child semantics.

`style` → `TextFieldStyler`

Optional. The style configuration for the text field.

The input anatomy is always a horizontal row. Forwarded container methods are the full BoxStyler surface, while generated spacing and crossAxisAlignment methods control that row directly. The row follows the ambient text direction; direction and main-axis controls are intentionally not part of its styling API. The separate layout styler wraps the label, input row, and helper text in a real Flex layout. It defaults to a vertical, min-size, start-aligned layout with 8 pixels of spacing, and its full Flex direction and alignment surface is honored.