Planned Update

This module is in the queue for a documentation refresh.

Text Inputs

1. Requirements Document

Overview

Standardized text entry components ensuring consistent styling, validation, and interaction states across the application. This includes single-line inputs, multi-line text areas, and password fields.

User Stories

  • As a User, I want to see a clear label and placeholder so I know what to type.
  • As a User, I want instant feedback when I enter an invalid email format.
  • As a Developer, I want to toggle password visibility without writing extra state logic.

Functional Requirements

  1. Variants:
    • Outline: Default style with a border.
    • Filled: Background color focus.
    • Underline: Minimalist style.
  2. Features:
    • Obscure text (Password mode) with toggle icon.
    • Prefix/Suffix icons (e.g., Search icon or Currency symbol).
    • Helper text and Error text support.
    • Character counter.
  3. Validation:
    • Regex-based patterns (Email, Phone).
    • Required field checks.
    • Custom validator functions.

2. Technical Document

Architecture

System Architecture

The TextField extends the BaseInput class to integrate with the form system. It utilizes Flutter's InputDecorator to handle labels, errors, and icons consistently.

API Design

Configuration

class TextInputConfig {
    final String label;
    final String? placeholder;
    final String? initialValue;
    final List<Validator> validators;
    final InputType type; // text, number, email, password
    final Widget? prefixIcon;
    final Widget? suffixIcon;
 
    const TextInputConfig({
        required this.label,
        this.type = InputType.text,
        this.validators = const [],
        this.prefixIcon,
        // ...
    });
}

Usage

MyTextField(
    config: TextInputConfig(
        label: "Email Address",
        type: InputType.email,
        prefixIcon: Icon(Icons.email),
        validators: [Validators.required, Validators.email],
    ),
    onChanged: (val) => print("Input: $val"),
)

Theming

Text Inputs rely heavily on InputDecorationTheme in ThemeData:

  • Border: OutlineInputBorder with borderRadius tokens.
  • Colors:
    • Focused Border: primary
    • Error Border: error
    • Fill Color: surfaceVariant (for filled variant).