🎯 Input Forms [Flutter Package]

Supercharge Your Flutter Forms

Beautiful, validated, and customizable form fields for Flutter applications.

Table of Contents

• Overview
• Installation
• Features
• All Available Fields
• Usage
• Complete Example
• API Reference
• Platform Support
• Contributing
• License

Overview

Input Forms is a comprehensive Flutter package providing pre-built, highly customizable form components for rapid application development. It includes all the essential fields you need—email, password, date picker, dropdown, phone, file upload, location, signature, and more—with built-in validation and Material Design 3 support.

Why Choose Input Forms?

• 🎨 Beautiful by Default: Material Design 3 compliant, customizable themes
• ✨ Ready to Use: Pre-built components for common form scenarios
• 🔒 Built-in Validation: Comprehensive validation out of the box
• 🎮 Developer Friendly: Intuitive API, extensive documentation
• 📱 Cross Platform: Android, iOS, Web, Windows, macOS, Linux
• 🔥 Performance Focused: Optimized for smooth performance

Installation

Add to your pubspec.yaml:

dependencies:
  input_forms: ^0.0.4

Then run:

flutter pub get

Quick Start

import 'package:input_forms/input_forms.dart';

// Use any form field:
EmailField(
  controller: emailController,
  label: 'Email Address',
)

Features

• All fields are Material Design 3 ready
• Built-in validation for all fields
• Highly customizable (labels, icons, error messages, etc.)
• Easy integration into any Flutter app
• Cross-platform support

All Available Fields

Usage

Import the package:

import 'package:input_forms/input_forms.dart';

Example: Login Form

class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          EmailField(
            controller: _emailController,
            label: 'Email',
          ),
          const SizedBox(height: 16),
          PasswordField(
            controller: _passwordController,
            label: 'Password',
          ),
          const SizedBox(height: 24),
          ElevatedButton(
            onPressed: _submitForm,
            child: Text('Login'),
          ),
        ],
      ),
    );
  }

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      // Process form
    }
  }
}

Complete Example: All Fields

Form(
  child: Column(
    children: [
      EmailField(
        controller: emailController,
        label: 'Email',
      ),
      PasswordField(
        controller: passwordController,
        label: 'Password',
      ),
      ConfirmPasswordField(
        passwordController: passwordController,
        confirmController: confirmPasswordController,
      ),
      UsernameField(
        controller: usernameController,
        label: 'Username',
      ),
      DatePickerField(
        controller: dateController,
        label: 'Date',
      ),
      DOBField(
        controller: dobController,
        label: 'Date of Birth',
      ),
      DropdownField<String>(
        label: 'Country',
        items: ['India', 'USA', 'UK'],
        value: selectedCountry,
        onChanged: (val) => setState(() => selectedCountry = val),
        itemLabel: (item) => item,
      ),
      SearchableDropdownField<String>(
        label: 'City',
        items: ['Chennai', 'Bangalore', 'Delhi'],
        value: selectedCity,
        onChanged: (val) => setState(() => selectedCity = val),
        itemLabel: (item) => item,
      ),
      PhoneField(
        controller: phoneController,
        label: 'Phone',
      ),
      LocationField(
        label: 'Location',
        // See API Reference for advanced options
      ),
      FileUploadField(
        // See API Reference for advanced options
      ),
      SignatureField(),
    ],
  ),
)

API Reference

EmailField

Validated email input with built-in format checking and error messages.

PasswordField

Password input with visibility toggle and custom validation.

ConfirmPasswordField

Ensures password and confirmation match.

UsernameField

Username input with length and custom validation.

DatePickerField

Date selection with calendar picker and formatting.

DOBField

Date of birth picker with age-appropriate ranges.

DropdownField

Generic dropdown with custom data, item labels, and flexible binding.

SearchableDropdownField

Dropdown with search, async loading, multi-select, custom item builder, and more.

PhoneField

International phone number input with country picker, flag, and validation.

LocationField

Geographic input with map, search, geolocation, and advanced configuration (offline, multi-select, favorite locations, etc.).

FileUploadField

File upload with preview, cloud storage, security, virus scanning, and advanced file processing options.

SignatureField

Digital signature capture for forms and agreements.

Platform Support

Contributing

We love contributions! Here's how you can help:

1. 🔍 Find a Bug? Open an issue!
2. 🎯 Missing a Feature? Request it!
3. 🎨 Want to Contribute? Submit a pull request!

License

MIT License © 2025 Kanagaraj.M

View Full License

Made with ❤️ by Kanagaraj.M | NoCorps

💻 Usage

Complete Form Example

class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          EmailField(
            controller: _emailController,
            label: 'Email',
            decoration: InputDecoration(
              prefixIcon: Icon(Icons.email),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
              ),
            ),
          ),
          const SizedBox(height: 16),
          PasswordField(
            controller: _passwordController,
            label: 'Password',
            decoration: InputDecoration(
              prefixIcon: Icon(Icons.lock),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
              ),
            ),
          ),
          const SizedBox(height: 24),
          ElevatedButton(
            onPressed: _submitForm,
            child: Text('Login'),
          ),
        ],
      ),
    );
  }

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      // Process form
    }
  }
}

🎯 Platform Support

🤝 Contributing

We love contributions! Here's how you can help:

1. 🔍 Find a Bug? Open an issue!
2. 🎯 Missing a Feature? Request it!
3. 🎨 Want to Contribute? Submit a pull request!

📊 Project Stats

📚 Resources

• 📖 API Documentation
• 💡 Examples
• 🐛 Issue Tracker
• 🚀 Changelog

📄 License

MIT License
Copyright (c) 2025 Kanagaraj.M

View Full License

🔑 Keywords

flutter form builder, material design forms, flutter input validation, flutter form fields, flutter UI components, form validation, input widgets, flutter forms, dart forms, form components, mobile forms, cross-platform forms, form validation package, input fields, form elements, input forms, form fields, input fields