FxInput
A reactive text input field with built-in validation and atomic styling.
FxInput
FxInput is a reactive wrapper around Flutter's TextField, designed to work seamlessly with FluxField for automatic state binding and validation.
Usage
final email = fluxField("").required().email();
FxInput(
signal: email,
placeholder: "Enter email",
keyboardType: TextInputType.emailAddress,
)Features
Two-Way Binding
The signal property handles both reading the current value and updating it when the user types.
Automatic Validation
If the signal has validation rules (like .required() or .email()), the input automatically displays error messages when validate() is called or the user interacts with it.
API Reference
| Name | Type | Default | Description |
|---|---|---|---|
signal | FluxField<String> | required | Reactive state for the input. |
placeholder | String? | null | Hint text displayed when empty. |
label | String? | null | Floating label text. |
keyboardType | TextInputType | text | Keypad type (email, phone, etc.). |
obscureText | bool | false | Whether to hide text (see FxPassword). |
prefixIcon | Widget? | null | Widget displayed before input. |
suffixIcon | Widget? | null | Widget displayed after input. |
onChanged | ValueChanged<String>? | null | Callback for manual updates. |
style | FxStyle? | null | Custom atomic styling. |
The Master Input Implementation
A professional login form slice with reactive validation, animated visibility toggles, and industrial styling.
class LoginCredentials extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 1. Define Reactive Fields with Validation
final email = fluxField("").required("Email is mandatory").email("Invalid format");
final password = fluxField("").required().min(8, "Minimum 8 characters");
return Fx.col(
gap: 16,
children: [
// 2. Styled Email Input
Fx.input(
signal: email,
placeholder: "work@company.com",
label: "Email Address",
prefixIcon: Icon(Icons.email_outlined, size: 20),
style: FxStyle(
bg: Colors.slate50,
rounded: 12,
border: Border.all(color: Colors.slate200),
),
),
// 3. Password Input with Built-in Toggle
Fx.password(
signal: password,
placeholder: "Enter secret key",
label: "Password",
prefixIcon: Icon(Icons.lock_outline, size: 20),
style: FxStyle(
bg: Colors.slate50,
rounded: 12,
border: Border.all(color: Colors.slate200),
),
),
Fx.gap(8),
// 4. Reactive Submit Button
Fx.button("AUTHENTICATE")
.primary
.fullWidth()
.sizeLg()
.onTap(() async {
// Trigger framework-wide validation
if (email.validate() && password.validate()) {
Fx.toast.info("Validating with Kernel...");
await Future.delayed(2.seconds);
Fx.toast.success("Identity Verified");
}
}),
],
).p(24).bg(Colors.white).rounded(24).shadowMd();
}
}Fluxy's input system is deeply integrated with the FluxyStabilityKernel™, ensuring that text editing remains responsive even during heavy background synchronization or state hydration.