FigmaComponent.textField

The FigmaComponent.textField component renders text input fields from your Figma design. It preserves all visual styling while adding input functionality.

Basic Usage

FigmaComponent.textField(
  "search_input",
  controller: searchController,
  hint: "Search...",
  onChanged: (value) {
    // Handle text changes
    print("Search query: $value");
  },
  onSubmitted: (value) {
    // Handle submit
    performSearch(value);
  },
)

Parameters

Parameter	Type	Description
`componentName`	`String`	The name of the text field component in your Figma file
`controller`	`TextEditingController?`	Optional controller for the text field
`onChanged`	`ValueChanged<String>?`	Optional callback when the text changes
`onSubmitted`	`ValueChanged<String>?`	Optional callback when the user submits the text
`hint`	`String?`	Optional hint text to display when the field is empty

How It Works

The component looks for a text node with the specified name in your Figma file
It preserves all text styling from Figma (font, size, color, etc.)
It renders an interactive text field with the same visual properties
It applies your callbacks for onChange and onSubmit events
If provided, it displays hint text when the field is empty

Examples

Basic Text Field

FigmaComponent.textField(
  "email_input",
  hint: "Enter your email",
  onChanged: (value) => setState(() => email = value),
)

Text Field with Controller

// In your StatefulWidget
late TextEditingController _passwordController;

@override
void initState() {
  super.initState();
  _passwordController = TextEditingController();
}

@override
void dispose() {
  _passwordController.dispose();
  super.dispose();
}

// In your build method
FigmaComponent.textField(
  "password_input",
  controller: _passwordController,
  hint: "Enter your password",
  onSubmitted: (value) => login(),
)

Search Field with Actions

FigmaComponent.textField(
  "search_input",
  controller: searchController,
  hint: "Search products...",
  onChanged: (value) {
    if (value.length >= 3) {
      // Auto-search after 3 characters
      searchProducts(value);
    }
  },
  onSubmitted: (value) {
    // Search on submit
    searchProducts(value);
    // Hide keyboard
    FocusScope.of(context).unfocus();
  },
)

Form Integration

final _formKey = GlobalKey<FormState>();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();

// In your build method
Form(
  key: _formKey,
  child: Column(
    children: [
      FigmaComponent.textField(
        "email_input",
        controller: _emailController,
        hint: "Email",
        onSubmitted: (_) => _passwordFocusNode.requestFocus(),
      ),
      SizedBox(height: 16),
      FigmaComponent.textField(
        "password_input",
        controller: _passwordController,
        hint: "Password",
        onSubmitted: (_) {
          if (_formKey.currentState!.validate()) {
            login();
          }
        },
      ),
      SizedBox(height: 24),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            login();
          }
        },
        child: Text("Log In"),
      ),
    ],
  ),
)

Figma Design Tips

Use text nodes: Design your text fields as standard text nodes in Figma
Consider states: Design different states (default, focus, error) for reference
Use clear styling: Make your text fields clearly look like input fields
Include appropriate spacing: Leave room for input text that may be longer than placeholders
Consider keyboard types: Design fields appropriately for different input types (email, password, etc.)

Best Practices

Always use controllers for important inputs: This allows you to easily retrieve, set, and clear values
Add proper validation: Validate input either on change or on submission
Consider the keyboard type: While Morphr can't automatically determine the keyboard type, design your Figma components to suggest the input type
Handle focus: Implement proper focus management for form fields
Provide clear hints: Use descriptive hint text to guide users

Limitations

Currently, the FigmaComponent.textField has a few limitations:

It doesn't automatically determine the appropriate keyboard type
Complex input decorations (icons, prefixes, suffixes) need to be handled manually
Validation needs to be implemented separately

These limitations may be addressed in future versions of Morphr.

This component is ideal for creating search inputs, login forms, comment fields, and any other text input that needs to match your Figma design.

Getting Started

Components