Basic Form

Estimated reading: 5 minutes 23 views

FlutKit provides a flexible and extensible form input system, built on top of Flutter’s TextField.
You can use FlutKit custom inputs for consistent styling or fall back to native Flutter inputs when needed.

CustomTextFormField

CustomTextFormField is the primary input widget in FlutKit.
It supports sizing, icons, password mode, rounded styles, floating labels, and validation out of the box.

Constructor

Dart

CustomTextFormField({
  Key? key,
  TextEditingController? controller,
  String? Function(String?)? validator,
  void Function(String?)? onSaved,
  void Function(String)? onChanged,
  void Function()? onTap,
  String? hintText,
  String? labelText,
  IconData? prefixIcon,
  IconData? suffixIcon,
  int? maxLines = 1,
  int? minLines,
  FloatingLabelBehavior? floatingLabelBehavior = FloatingLabelBehavior.never,
  FloatingLabelAlignment? floatingLabelAlignment = FloatingLabelAlignment.start,
  TextStyle? floatingLabelStyle,
  MouseCursor? mouseCursor,
  bool enabled = true,
  bool readOnly = false,
  bool isPassword = false,
  String? successMessage,
  double? radius,
  FormSize size = FormSize.medium,
  TextInputType? keyboardType,
  List<TextInputFormatter>? inputFormatters,
  TextInputAction? textInputAction,
  bool? obscureText,
})

CustomTextFormField({
  Key? key,
  TextEditingController? controller,
  String? Function(String?)? validator,
  void Function(String?)? onSaved,
  void Function(String)? onChanged,
  void Function()? onTap,
  String? hintText,
  String? labelText,
  IconData? prefixIcon,
  IconData? suffixIcon,
  int? maxLines = 1,
  int? minLines,
  FloatingLabelBehavior? floatingLabelBehavior = FloatingLabelBehavior.never,
  FloatingLabelAlignment? floatingLabelAlignment = FloatingLabelAlignment.start,
  TextStyle? floatingLabelStyle,
  MouseCursor? mouseCursor,
  bool enabled = true,
  bool readOnly = false,
  bool isPassword = false,
  String? successMessage,
  double? radius,
  FormSize size = FormSize.medium,
  TextInputType? keyboardType,
  List<TextInputFormatter>? inputFormatters,
  TextInputAction? textInputAction,
  bool? obscureText,
})

Basic Usage Examples

Basic Input

Dart

CustomTextFormField(
  hintText: "",
)

CustomTextFormField(
  hintText: "",
)

Input with Hint

Dart

CustomTextFormField(
  hintText: "It's a hint!",
)

CustomTextFormField(
  hintText: "It's a hint!",
)

Disabled Input

Dart

CustomTextFormField(
  hintText: "It's disabled!",
  enabled: false,
)

CustomTextFormField(
  hintText: "It's disabled!",
  enabled: false,
)

Readonly Input

Dart

CustomTextFormField(
  hintText: "It's readonly!",
  readOnly: true,
)

CustomTextFormField(
  hintText: "It's readonly!",
  readOnly: true,
)

Prefix Icon

Dart

CustomTextFormField(
  prefixIcon: Icons.mail_outline,
  hintText: "example@gmail.com",
)

CustomTextFormField(
  prefixIcon: Icons.mail_outline,
  hintText: "example@gmail.com",
)

Suffix Icon

Dart

CustomTextFormField(
  suffixIcon: Icons.mail_outline,
  hintText: "example@gmail.com",
)

CustomTextFormField(
  suffixIcon: Icons.mail_outline,
  hintText: "example@gmail.com",
)

Password Input

Dart

CustomTextFormField(
  hintText: 'Use a strong password',
  isPassword: true,
)

CustomTextFormField(
  hintText: 'Use a strong password',
  isPassword: true,
)

Rounded Input

Dart

CustomTextFormField(
  prefixIcon: Icons.mail_outline,
  hintText: "example@gmail.com",
  radius: 50,
)

CustomTextFormField(
  prefixIcon: Icons.mail_outline,
  hintText: "example@gmail.com",
  radius: 50,
)

Text Area

Dart

CustomTextFormField(
  hintText: "Type your message...",
  minLines: 6,
  maxLines: 6,
)

CustomTextFormField(
  hintText: "Type your message...",
  minLines: 6,
  maxLines: 6,
)

Field Sizes

Dart

// Small
CustomTextFormField(
  size: FormSize.small,
  hintText: "example@gmail.com",
)

// Medium
CustomTextFormField(
  size: FormSize.medium,
  hintText: "example@gmail.com",
)

// Large
CustomTextFormField(
  size: FormSize.large,
  isPassword: true,
)

// Small
CustomTextFormField(
  size: FormSize.small,
  hintText: "example@gmail.com",
)

// Medium
CustomTextFormField(
  size: FormSize.medium,
  hintText: "example@gmail.com",
)

// Large
CustomTextFormField(
  size: FormSize.large,
  isPassword: true,
)

Floating Label Examples

Basic Floating Label

Dart

CustomTextFormField(
  labelText: 'Basic Input',
  floatingLabelBehavior: FloatingLabelBehavior.always,
)

CustomTextFormField(
  labelText: 'Basic Input',
  floatingLabelBehavior: FloatingLabelBehavior.always,
)

Floating Label with Prefix Icon

Dart

CustomTextFormField(
  labelText: 'Input with Prefix',
  floatingLabelBehavior: FloatingLabelBehavior.always,
  prefixIcon: Icons.mail_outline,
  hintText: "example@gmail.com",
)

CustomTextFormField(
  labelText: 'Input with Prefix',
  floatingLabelBehavior: FloatingLabelBehavior.always,
  prefixIcon: Icons.mail_outline,
  hintText: "example@gmail.com",
)

Floating Label Text Area

Dart

CustomTextFormField(
  labelText: 'Text Area',
  floatingLabelBehavior: FloatingLabelBehavior.always,
  minLines: 6,
  maxLines: 6,
  hintText: "Type your message...",
)

CustomTextFormField(
  labelText: 'Text Area',
  floatingLabelBehavior: FloatingLabelBehavior.always,
  minLines: 6,
  maxLines: 6,
  hintText: "Type your message...",
)

Using Native Flutter TextFormField

FlutKit fully supports native Flutter inputs.
You may use TextFormField directly if you need maximum control or platform-default behavior.

Example

Dart

TextFormField(
  decoration: InputDecoration(
    hintText: 'Input with Hint',
  ),
)

TextFormField(
  decoration: InputDecoration(
    hintText: 'Input with Hint',
  ),
)

Floating Label (Native)

Dart

TextFormField(
  decoration: InputDecoration(
    floatingLabelBehavior: FloatingLabelBehavior.always,
    labelText: 'Basic Input',
    hintText: '',
  ),
)

TextFormField(
  decoration: InputDecoration(
    floatingLabelBehavior: FloatingLabelBehavior.always,
    labelText: 'Basic Input',
    hintText: '',
  ),
)

Additional Custom Input Widgets

Besides CustomTextFormField, FlutKit provides several specialized input widgets.

ActionInputField

Input field with an action button (e.g. search, submit).

Dart

ActionInputField({
  Key? key,
  required String hintText,
  required String buttonText,
  Color textColor = Colors.white,
  required Color buttonColor,
  void Function(String)? onSubmit,
  TextEditingController? controller,
  String? Function(String?)? validator,
  bool clearOnSubmit = true,
  FormSize size = FormSize.medium,
  String? successMessage,
  double radius = defaultRadius,
})

ActionInputField({
  Key? key,
  required String hintText,
  required String buttonText,
  Color textColor = Colors.white,
  required Color buttonColor,
  void Function(String)? onSubmit,
  TextEditingController? controller,
  String? Function(String?)? validator,
  bool clearOnSubmit = true,
  FormSize size = FormSize.medium,
  String? successMessage,
  double radius = defaultRadius,
})

Example

Dart

ActionInputField(
  hintText: "Type something...",
  buttonText: "Search",
  buttonColor: kPrimaryColor,
)

ActionInputField(
  hintText: "Type something...",
  buttonText: "Search",
  buttonColor: kPrimaryColor,
)

OutlineSearchBar

Outlined search input with clean UI.

Dart

OutlineSearchBar(
  hintText: 'Search...',
)

OutlineSearchBar(
  hintText: 'Search...',
)

SoftSearchBar

Soft (filled) search bar style.

Dart

SoftSearchBar(
  hintText: 'Search...',
)

SoftSearchBar(
  hintText: 'Search...',
)

SearchBarWithActions

Search bar with action icons (e.g. mic, vision).

Dart

SearchBarWithActions(
  hintText: 'Search...',
)

SearchBarWithActions(
  hintText: 'Search...',
)

OversizeSearchBar

Large, prominent search bar for dashboards or hero sections.

Dart

OversizeSearchBar(
  hintText: 'Search...',
)

OversizeSearchBar(
  hintText: 'Search...',
)

Notes

All input widgets respect FlutKit theme, typography, and color palette
Sizes are controlled via FormSize
Radius, icons, and behaviors are fully customizable
Designed to work consistently across all FlutKit dashboards

Demo

To see this component in action, please refer to the demo available under Forms → Basic Form.

This demo showcases common usage patterns, configuration variations, and visual behavior within a real form layout.