MainTextField Flutter Package

The MainTextField package is a customizable form field widget built for Flutter, offering various configurations to adapt to a wide range of use cases, such as inputting text, email, password, phone numbers, and more. It provides advanced functionality like validation, customizable appearance, and support for keyboard actions and user interactions.

Repo stars Last Commit Repo PRs Repo issues License

Table of Contents

Features

  • Configurable input fields: Supports text, email, password, confirm password, number, and phone input types.
  • Customizable decorations: Add prefix/suffix icons, background color, and custom borders.
  • Validation support: Easily integrate field validation logic with custom validators.
  • Various input types: Control the keyboard type, input formatting, and input actions.
  • Required field indicator: Display an asterisk for required fields.
  • Text customization: Support for custom styles, text capitalization, alignment, and hint text.

Installation

  1. Add the following to your pubspec.yaml:
dependencies:
  main_text_field: <latest_version>
  1. to handle responsive
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // this very important
    MainWidgetsUtil.init(
      context,
      designSize: const Size(375, 812),
      minTextAdapt: true,
    );
    return MaterialApp(
      localizationsDelegates: context.smartLocalizeDelegates,
      home: const HomeScreen(),
    );
  }
}

Usage

Basic Usage

Here is an example of how to use the MainTextField widget in your Flutter application:

MainTextField(
  labelText: "Your Name",
  hintText: "Enter your full name",
  onChanged: (value) {
    print("Value changed: $value");
  },
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter your name';
    }
    return null;
  },
)

Localization

To enable validation message localization in the Factory Constructors, add context.smartLocalizeDelegates to your app's list of delegates:

  MaterialApp(
    localizationsDelegates: [
       context.smartLocalizeDelegates,
    ],
    // other app configurations...
  )

Customization Options

MainTextField provides multiple customization options for a wide range of configurations:

  • Width and radius for the input field
  • Input formatters and input type
  • Read-only state for disabled input
  • Custom label, hint, and error messages
  • Prefix and suffix icons for additional user feedback or actions
  • Support for dense layout and padding
  • Text alignment, capitalization, and input validation

Properties

Below is a list of the most commonly used properties:

Property Type Default Value Description
width double 370 Sets the width of the text field.
radius double 12 Radius for rounding the corners of the text field.
minLines int 1 Minimum number of lines for multiline input.
maxLines int 1 Maximum number of lines for multiline input.
keyboardType TextInputType TextInputType.text Type of keyboard to display (text, email, number, etc.).
validator String? Function(String?)? null Function to validate the input. Returns error string if invalid.
onSave void Function(String?)? null Callback to save the input value.
onChanged void Function(String)? null Callback triggered when the input value changes.
readOnly bool false Makes the field read-only.
controller TextEditingController? null Manages the text field's text and state.
prefixIcon Widget? null Widget to show as a prefix inside the input field (e.g., an icon).
suffixIcon Widget? null Widget to show as a suffix inside the input field.
textAlign TextAlign? TextAlign.start Alignment of the input text within the field.
labelText String? null Text displayed above the field as a label.
hintText String? null Text displayed inside the field when it is empty.
isEnable bool true Enables or disables the text field.
isRequired bool true Marks the field as required for validation purposes.

Factory Constructors

The MainTextField class offers multiple factory constructors to create specific types of input fields easily. Below are the most commonly used ones:

Email

Example Code 
  MainTextField.email(
    onSaved: (val) => email = val,
  )

Password

  MainTextField.password(
    onSaved: (val) => password = val,
  )

Confirm Password

  MainTextField.confirmPassword(
    passwordValue: "< password_value >",
    onSaved: (val) => confirmPassword = val,
  )

Number

  MainTextField.number(
    onSaved: (val) => number = val,
  )

Phone

  MainTextField.phone(
    onSaved: (val) => phone = val,
  )

Contributions

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a feature, please send a pull request.

Made with contrib.rocks.

Libraries

main_text_field