PrimitiveInput

A flexible text input component built on Flutter’s EditableText primitive. It provides a clean, composition-ready API without the heavy weight of Material’s TextField.

Overview

PrimitiveInput wraps standard text editing logic in a customizable container that manages focus states, error states, and visual variants.

Primitive Input DemoOpen in new tab ↗

Basic Usage


import 'package:primitive_ui/primitive_ui.dart';
 
// Default Outline Input
PrimitiveInput(
  placeholder: 'Enter your name',
  onChanged: (value) => print(value),
)
 
// Search Input with Icons
PrimitiveInput(
  placeholder: 'Search...',
  leading: Icon(Icons.search),
  variant: PrimitiveInputVariant.filled,
)
 
// Password Field
PrimitiveInput(
  placeholder: 'Password',
  obscureText: true,
  trailing: Icon(Icons.visibility_off),
)

API Reference

Parameter	Type	Required	Default	Description
`placeholder`	`String?`	✗	`null`	Text displayed when the input is empty.
`variant`	`PrimitiveInputVariant`	✗	`outline`	Visual style: outline, filled, or flushed.
`size`	`PrimitiveInputSize`	✗	`md`	Height and padding size: sm, md, lg.
`leading`	`Widget?`	✗	`null`	Widget displayed before the text input.
`trailing`	`Widget?`	✗	`null`	Widget displayed after the text input.
`hasError`	`bool`	✗	`false`	If true, changes the border color to indicate an error.
`controller`	`TextEditingController?`	✗	`null`	Controls the text being edited.

Philosophy

Following the library’s primitive approach, this component uses EditableText directly rather than TextField. This gives us complete control over the decoration container without fighting Material’s default InputDecoration sizing and padding. It is designed to be composed into larger forms rather than being a “smart” form field itself.