intelligentsia_forms Package

The intelligentsia_forms package for Flutter provides a robust toolkit to create customizable sign-in and sign-up forms. It includes components for various form fields such as Email, Name, Password, About Me, Country, Birth Date, and Gender. Each component supports extensive customization options, including color, font, icon, and layout styling, to give users a tailored experience.

Key Features

• Highly customizable components for creating user-friendly forms.
• Flexible styling options to fit any design theme.
• Easy handling of user-input data, including validation and data processing.
• Pre-built components for standard form fields to simplify development.

---

Component Documentation

SmartTextFormField

The SmartTextFormField widget is a versatile text field component designed for fields like email, password, username, and "About Me." Each field type comes with specialized settings to enhance usability.

Features

1. Form Type-Specific Customization

   • Placeholder text, icons, validation, and keyboard types adapt based on the selected formType (email, password, confirmPassword, userName, firstName, lastName, or aboutMe).
   • Form-specific settings, like toggling password visibility for password and confirmPassword.

2. Field Label Customization

   • Override the label text with fieldName (useful for localization).
   • Customize the label's color, font size, and font weight for distinct appearances.

3. Hint Text Customization

   • Override the placeholder with hintText (useful for localization).
   • Set custom hint text color, font size, and font weight.

4. Validation & Input Control

   • Override error messages with emptyFieldErrorMessage and invalidFormErrorMessage.
   • Provide a custom validator, or use built-in validation with optional minLength (password fields).
   • Control enabled, readOnly, textCapitalization, autovalidateMode, and onFieldSubmitted.

5. Icon Options

   • Override the prefix icon with prefixIcon, or use the default icon for each formType.
   • Configurable suffix icons with options for outlined icons.
   • Control icon color and size for consistent design.

6. Border Styling

   • Adjustable border radius and color settings for various states (enabled, focused, error).

7. Error Message Styling

   • Customizable error message styling for clear user feedback.

8. Flexible Padding Options

   • Separate padding options inside and outside the field.

9. Data Control

   • Supports custom TextEditingController and onChanged handlers.
   • Limits on maximum and minimum lines for fields like “About Me.”

10. Global Styling

    • Options to set background fill color and primary color per field.
    • Nullable styling params inherit from IntelligentsiaFormTheme when omitted.

11. Password Toggle

    • For password and confirmPassword fields, a suffix icon toggles password visibility.

12. Confirm Password

    • Use FormType.confirmPassword with a required matchController to validate against another password field.

Localization

Each formType ships with English defaults for the label, hint, and error messages. Pass fieldName, hintText, emptyFieldErrorMessage, and invalidFormErrorMessage to override them:

const SmartTextFormField(
  formType: FormType.password,
  fieldName: 'Mot de passe',
  hintText: 'Entrez votre mot de passe',
  emptyFieldErrorMessage: 'Veuillez entrer votre mot de passe',
  invalidFormErrorMessage: 'Le mot de passe doit contenir au moins 6 caractères',
)

Confirm password example:

SmartTextFormField(
  formType: FormType.confirmPassword,
  matchController: passwordController,
  fieldName: 'Confirmer le mot de passe',
  hintText: 'Confirmez votre mot de passe',
)

formType	Default label	Default hint
email	Email	Enter your email
password	Password	Enter your password
confirmPassword	Confirm Password	Confirm your password
userName	Username	Enter your username
firstName	First Name	Enter your first name
lastName	Last Name	Enter your last name
aboutMe	About Me	Tell us about yourself

Shared Theme

Wrap your form with IntelligentsiaFormTheme to apply shared styling defaults to all SmartTextFormField widgets:

IntelligentsiaFormTheme(
  data: const IntelligentsiaFormThemeData(
    primaryColor: Colors.black87,
    enabledBorderSide: BorderSide(color: Colors.transparent),
    socialShowBorder: true,
    socialShowShadow: false,
  ),
  child: Column(
    children: [
      SmartTextFormField(formType: FormType.email),
      SmartTextFormField(formType: FormType.password),
      SocialAuthButton(
        provider: SocialAuthProvider.google,
        label: 'Continue with Google',
        expand: true,
        onTap: () {},
      ),
    ],
  ),
)

Individual fields and buttons can still override any theme value.

Standard Style

---

CountrySelector

The CountrySelector widget lets users pick a country, displaying the selected country’s name and flag.

Features

1. Country Selection Callback

   • Calls a function (onCountrySelected) with the selected country’s name, code, and flag.

2. Customizable Field Label

   • Customize the label displayed above the field (text color, font size, and weight).

3. Hint Text Styling

   • Adjust the hint text's color, font size, and weight.

4. Icon Customization

   • Configurable prefix and suffix icons (e.g., flag and info icons).
   • Option to enable or disable an info suffix icon.

5. Flush Bar Notifications

   • Optional Flushbar message displayed when the info icon is tapped, with customizable content, duration, and position.

6. Global and Border Styling

   • Set the primary color, fill color, border radius, and border style.

7. Padding Control

   • Separate options for inside and outside padding.

8. Country Display

   • Displays the selected country name and flag in the field, with styling for unselected and selected states.

9. Country Picker Integration

   • Allows browsing and selecting a country via a modal picker.

Standard Style

DateSelector

The DateSelector widget provides a date picker for selecting and displaying dates.

Features

1. Date Selection Callback

   • Calls a function (selectedDate) with the selected date’s year, month, and day.

2. Field Label Customization

   • Adjustable label color, font size, and font weight.

3. Hint Text Styling

   • Custom hint text styling displayed inside the field when no date is selected.

4. Icon Customization

   • Configurable prefix icon (calendar icon) with color, size, and outlined style.

5. Padding and Border Styling

   • Inside and outside padding options and customizable border style.

6. Date Constraints

   • Minimum and maximum date settings to restrict selection range.

7. Selected Date Display

   • Displays the chosen date in a formatted style.

8. Date Picker Integration

   • Opens a date picker modal with custom primary and fill colors.

Standard Style

GenderSelector

The GenderSelector widget lets users select gender from customizable options.

Features

1. Gender Selection Callback

   • Calls onGenderSelected function with the chosen gender.

2. Customizable Field Label

   • Adjustable label color, font size, and weight.

3. Flexible Gender Options

   • Customizable list of gender choices (default is ['Male', 'Female']).

4. Text Styling for Options

   • Customizable font size and dynamic color based on selection state.

5. Color and Border Styling

   • Configurable primary color, font color, background fill, and border radius.

6. Interactive Gender Selection

   • Gender options behave as interactive buttons, with distinct styling for selected options.

SocialAuthButton

The SocialAuthButton widget provides a customizable button for social media authentication. It supports various social media providers, including Google, Facebook, Apple, Twitter, Pinterest, and LinkedIn, and allows for either outlined or solid logos.

Features

1. Social Media Provider Support

   • Includes icons for Google, Facebook, Apple, Twitter, Pinterest, and LinkedIn.
   • Automatically selects the appropriate logo based on the chosen provider.

2. Outlined or Solid Logo

   • Choose between an outlined or filled logo style by setting the outlinedLogo property.

3. Optional Label

   • Display a text label next to the icon with label.
   • Use expand: true for a full-width button with centered icon and label.
   • Customize with labelStyle, labelSpacing, and enabled.

4. Flat Outlined Style (default)

   • Uses StandardSocialAuthStyle: no shadow, subtle border, rounded corners.
   • Full-width buttons (expand: true) use an outlined style by default.
   • Override with backgroundColor, logoBackgroundColor, borderSide, showBorder, showShadow, and contentPadding.

5. Theme Integration

   • Shared social-button styling via IntelligentsiaFormThemeData (socialBackgroundColor, socialBorderSide, etc.).

6. Customizable Background and Padding

   • Set background colors and padding for both outlined and solid logo styles.

7. Configurable Button Size

   • Customize the width and height of the button to fit your design.

8. Border Radius and Box Shadow

   • Customize the button's border radius and optionally add a box shadow.

9. On-Tap Callback

   • Easily handle user interactions with an onTap callback.

Full-width example:

SocialAuthButton(
  provider: SocialAuthProvider.google,
  label: 'Continue with Google',
  expand: true,
  onTap: () {},
)

Standard Style

Installation

Add intelligentsia_forms to your pubspec.yaml:

dependencies:
  intelligentsia_forms: ^1.5.0

Note

The CountrySelector widget uses the Flushbar package for displaying notifications. It is included as a dependency of intelligentsia_forms — you do not need to add it separately unless you use Flushbar directly in your app.

Use IntelligentsiaColors for built-in color constants, or replace them with your app's color theme as needed.

Dependencies

dependencies:
  flutter:
    sdk: flutter
  another_flushbar: ^2.2.4
  country_picker: ^2.0.28