form-widgets

Form Widgets Reference

iOS-style input controls with automatic theme adaptation and validation patterns.

CupertinoTextFieldWidget

iOS text input with automatic clear button.

// Basic text field
const CupertinoTextFieldWidget(
  placeholder: 'Enter your name',
)

// With controller
final nameController = useTextEditingController(); // or TextEditingController()

CupertinoTextFieldWidget(
  placeholder: 'Name',
  controller: nameController,
  onChanged: (value) {
    print('Name changed: $value');
  },
)

// Email field
const CupertinoTextFieldWidget(
  placeholder: 'Email',
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.next,
)

// Password field
const CupertinoTextFieldWidget(
  placeholder: 'Password',
  obscureText: true,
  keyboardType: TextInputType.visiblePassword,
)

// Multiline
const CupertinoTextFieldWidget(
  placeholder: 'Description',
  maxLines: 5,
  minLines: 3,
)

Default Styling:

• Padding: EdgeInsets.only(left: 16, top: 11, bottom: 11)
• Typography: bodyRegular
• Background: primaryLight / primaryDarkElevated
• Clear button: Shows when editing (suffix mode)

CupertinoSearchTextFieldWidget

Search field with magnifying glass icon.

// Basic search
const CupertinoSearchTextFieldWidget()

// With controller
final searchController = useTextEditingController();

CupertinoSearchTextFieldWidget(
  controller: searchController,
  placeholder: 'Search contacts',
  onChanged: (value) {
    // Filter results
  },
  onSubmitted: (value) {
    // Perform search
  },
)

Default Styling:

• Border radius: 10pt
• Background: defaultFillColors.tertiary
• Icon size: 20pt (search), 18pt (clear)

SwitchWidget

iOS toggle switch.

// Basic switch
SwitchWidget(
  value: true,
  onChanged: (value) {
    print('Switch toggled: $value');
  },
)

// In row
RowWidget.standard(
  title: 'Notifications',
  description: null,
  leftWidget: null,
  rightWidget: SwitchWidget(
    value: _notificationsEnabled,
    onChanged: (value) {
      setState(() => _notificationsEnabled = value);
    },
  ),
  displayDivider: false,
  onPressed: null,
  onLongPress: null,
  decorationCallback: null,
)

// Disabled
SwitchWidget(
  value: true,
  onChanged: null, // Disabled
)

// Custom color
SwitchWidget(
  value: true,
  onChanged: (value) {},
  activeTrackColorCallback: (theme) => theme.defaultColors.systemBlue,
)

// Stocks variant (green when on)
SwitchWidget.stocks(
  value: true,
  onChanged: (value) {},
)