flexi_form_field (v3.0.2) #

A flexible and highly customizable Flutter form widget suite with built-in validation, rich styling options, and a consistent theming system. Drop-in replacements for common Flutter form UI with minimal boilerplate.

🖼 Showcase #

Form Demo	Text Fields	Auto-Complete	Date Pickers	Components

Widgets #

Installation #

Add to your pubspec.yaml:

dependencies:
  flexi_form_field: ^3.0.2

Then run:

flutter pub get

Import in your Dart file:

import 'package:flexi_form_field/flexi_form_field.dart';

Theming #

All widgets accept an optional FlexiFormTheme to maintain a consistent look across your form.

final myTheme = FlexiFormTheme(
  primaryColor: Colors.indigo,
  borderRadius: BorderRadius.all(Radius.circular(12)),
  labelStyle: TextStyle(color: Colors.black87),
  errorStyle: TextStyle(color: Colors.red),
  fillColor: Colors.grey[100],
);

FlexiFormTheme Properties #

Enums #

FlexiFieldStyle — Border style #

FlexiFieldLayout — Label position #

FlexiFieldWrapper — Container style #

FlexiFormField #

A powerful text input widget with built-in validators and input formatters.

FlexiFormField(
  label: "Email Address",
  hint: "you@example.com",
  prefixIcon: Icon(Icons.alternate_email_rounded, size: 20),
  isEmail: true,
  isMandatory: true,
  theme: myTheme,
)

Properties #

Examples #

Email field with mandatory validation:

FlexiFormField(
  label: "Email",
  isEmail: true,
  isMandatory: true,
  prefixIcon: Icon(Icons.email_outlined, size: 20),
  theme: myTheme,
)

Filled-style password field:

FlexiFormField(
  label: "Password",
  fieldStyle: FlexiFieldStyle.filled,
  obscureText: true,
  isMandatory: true,
  fillColor: Colors.grey[100],
)

Numbers-only field with external label:

FlexiFormField(
  externalLabel: "Phone Number",
  hint: "Enter 10-digit number",
  isMobile: true,
  isMandatory: true,
  keyboardType: TextInputType.phone,
)

Multiline text area:

FlexiFormField(
  label: "Notes",
  maxLines: 5,
  fieldStyle: FlexiFieldStyle.outline,
)

FlexiDropDown<T> #

A generic type-safe dropdown built on the same styling system.

FlexiDropDown<String>(
  label: "Gender",
  hint: "Choose...",
  isMandatory: true,
  items: const [
    DropdownMenuItem(value: "M", child: Text("Male")),
    DropdownMenuItem(value: "F", child: Text("Female")),
    DropdownMenuItem(value: "O", child: Text("Other")),
  ],
  onChanged: (value) => print(value),
  theme: myTheme,
)

Shares the same fieldStyle, fieldLayout, wrapper, theme, isMandatory, prefixIcon, suffixIcon, label, externalLabel, hint, fillColor, borderRadius, fontSize, and style override properties as FlexiFormField.

FlexiDatePicker #

Opens the Material date dialog on tap and writes the formatted date to the controller.

final dateController = TextEditingController();

FlexiDatePicker(
  controller: dateController,
  label: "Date of Birth",
  hint: "Select a date",
  dateFormat: 'dd-MM-yyyy',      // Default
  isMandatory: true,
  showClearButton: true,
  firstDate: DateTime(1900),
  lastDate: DateTime.now(),
  prefixIcon: Icon(Icons.calendar_today_rounded, size: 20),
  onSelect: (DateTime? date, String formatted) {
    print('Selected: $formatted');
  },
  theme: myTheme,
)

Key Properties #

FlexiTimePicker #

Opens the Material time dialog on tap.

final timeController = TextEditingController();

FlexiTimePicker(
  controller: timeController,
  label: "Meeting Time",
  hint: "Select a time",
  isMandatory: true,
  showClearButton: true,
  initialTime: TimeOfDay(hour: 9, minute: 0),
  prefixIcon: Icon(Icons.access_time_rounded, size: 20),
  onSelect: (TimeOfDay? time, String? formatted) {
    print('Selected: $formatted');
  },
  theme: myTheme,
)

FlexiDateTimePicker #

Chains a date picker immediately followed by a time picker in a single tap.

final dtController = TextEditingController();

FlexiDateTimePicker(
  controller: dtController,
  label: "Appointment",
  hint: "Select date & time",
  dateFormat: 'dd-MM-yyyy HH:mm',   // Default
  isMandatory: true,
  prefixIcon: Icon(Icons.calendar_month_rounded, size: 20),
  onSelect: (DateTime? dt, String formatted) {
    print('Appointment: $formatted');
  },
  theme: myTheme,
)

FlexiAutoComplete<T> #

A generic searchable autocomplete backed by flutter_typeahead.

final searchController = TextEditingController();
final List<String> countries = ["India", "USA", "Germany", "Japan"];

FlexiAutoComplete<String>(
  controller: searchController,
  label: "Country",
  hint: "Start typing...",
  options: countries,
  itemLabelBuilder: (country) => country,
  isMandatory: true,
  prefixIcon: Icon(Icons.public_rounded, size: 20),
  onSelected: (String? selected) {
    print('Selected: $selected');
  },
  onChanged: (String? value, String text) {},
  theme: myTheme,
)

Key Properties #

FlexiButton #

A highly customizable button with gradient, shadow, animation, and shape support.

FlexiButton(
  width: double.infinity,
  height: 52,
  onTap: () => submitForm(),
  child: Text("SUBMIT"),
)

Gradient button:

FlexiButton(
  width: double.infinity,
  gradient: LinearGradient(
    colors: [Colors.purple, Colors.deepPurple],
  ),
  borderRadius: 16,
  onTap: () {},
  child: Text("GET STARTED"),
)

Outlined button:

FlexiButton(
  color: Colors.transparent,
  border: Border.all(color: Colors.black, width: 1.5),
  textColor: Colors.black,
  onTap: () {},
  child: Text("SECONDARY"),
)

Properties #

FlexiStepper #

A horizontal scrollable stepper that auto-scrolls to the active step.

int _currentStep = 0;

FlexiStepper(
  currentStep: _currentStep,
  stepTitles: ["Basic Info", "Contact", "Address", "Review"],
  onStepChange: (index) => setState(() => _currentStep = index),
  borderRadius: 12,
  margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
)

Properties #

FlexiTabBar #

An animated segmented control for switching between views.

int _tab = 0;

FlexiTabBar(
  tabs: ["Active", "Completed", "Archived"],
  currentIndex: _tab,
  onChanged: (index) => setState(() => _tab = index),
  borderRadius: 12,
)

With gradient active indicator:

FlexiTabBar(
  tabs: ["Day", "Week", "Month"],
  currentIndex: _tab,
  onChanged: (i) => setState(() => _tab = i),
  activeGradient: LinearGradient(
    colors: [Colors.purple, Colors.deepPurple],
  ),
)

Properties #

FlexiTimer #

A self-contained countdown-style timer with start, pause, resume, and stop controls.

FlexiTimer(
  borderRadius: 16,
  startLabel: "Start",
  pauseLabel: "Pause",
  resumeLabel: "Resume",
  stopLabel: "Stop",
)

Properties #

Dependencies #

Platform Support #

Android · iOS · macOS · Windows · Linux · Web

License #

MIT License — see LICENSE for details.

Changelog #

See CHANGELOG.md for a full version history.

Repository #

github.com/manojprajapati1999/flexi_form_field

👨‍💻 Author #

Manoj Patadiya 📧 Email: patadiyamanoj4@gmail.com