TextField
A text input component for collecting user text input with labels, hints, and validation support
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,
),
);
}
RemixTextFieldStyle get style {
return RemixTextFieldStyle()
.color(Colors.grey.shade800)
.backgroundColor(Colors.white)
.borderRadiusAll(const Radius.circular(8.0))
.height(44)
.paddingX(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(const Offset(0, 1)),
)
.border(
BoxBorderMix.all(BorderSideMix(color: Colors.grey.shade300)),
)
.onFocused(
RemixTextFieldStyle().border(
BoxBorderMix.all(
BorderSideMix()
.color(Colors.deepPurpleAccent)
.width(3)
.strokeAlign(BorderSide.strokeAlignCenter),
),
),
);
}
}
Fortal styles
Remix includes Fortal-themed style helpers for this component:
import 'package:flutter/material.dart';
import 'package:remix/remix.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: [
RemixTextField(
controller: controller,
label: 'Email',
hintText: 'Enter your email',
style: FortalTextFieldStyle.base(),
),
RemixTextField(
controller: controller,
label: 'Password',
hintText: 'Enter password',
obscureText: true,
style: FortalTextFieldStyle.base(),
),
],
);
}
}
See the FortalTextFieldStyle source code for all available options.
Constructor
const RemixTextField({
Key? key,
TextEditingController? controller,
FocusNode? focusNode,
String? label,
String? hintText,
String? helperText,
String? errorText,
TextInputType? keyboardType,
TextInputAction? textInputAction,
bool obscureText = false,
bool enabled = true,
bool readOnly = false,
bool autofocus = false,
int? maxLines = 1,
int? maxLength,
ValueChanged<String>? onChanged,
VoidCallback? onEditingComplete,
ValueChanged<String>? onSubmitted,
RemixTextFieldStyle style = const RemixTextFieldStyle.create(),
RemixTextFieldSpec? styleSpec,
})
textCapitalization → TextCapitalization
Optional. Configures how the platform keyboard will select an uppercase or lowercase keyboard.
autofocus → bool
Optional. Whether this text field should focus itself if nothing else is already focused.
onChanged → ValueChanged<String>?
Optional. Called when the user initiates a change to the TextField's value.
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.
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.
onPressUpOutside → TapRegionUpCallback?
Optional. Called when tap up is detected outside of this text field.
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.
enableIMEPersonalizedLearning → bool
Optional. Whether to enable that the IME update personalized data.
contextMenuBuilder → EditableTextContextMenuBuilder?
Optional. A context menu builder for the text field.
magnifierConfiguration → TextMagnifierConfiguration?
Optional. Configuration for text magnification.