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.

Table of Contents

• Features
• Installation
• Usage
  • Basic Usage
  • Factory Constructors
• Localization
• Customization Options
• Properties
• Factory Constructors
  • Email
  • Password
  • Confirm Password
  • Number
  • Phone

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>

2. 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:

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

  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.