📝 Flutter Form Kit #

A comprehensive Flutter package for beautiful, cross-platform form input widgets with consistent styling and validation support.

✨ Features #

• 📱 Cross-platform: Native iOS/macOS and Material Design styling
• 🎨 Customizable: Extensive styling options for all components
• ✅ Validation: Built-in form validation support
• ♿ Accessible: Proper focus handling and keyboard navigation
• 🌍 Localizable: Full localization support
• 🔧 Flexible: Easy to integrate with existing form systems
• ⚡ Performance: Optimized for smooth animations and interactions

📦 Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_form_kit: ^1.0.0

Then run:

flutter pub get

🚀 Quick Start #

import 'package:flutter_form_kit/flutter_form_kit.dart';

// Basic text field
CustomTextFormField(
  hintText: 'Enter your name',
  label: 'Full Name',
  textInputType: TextInputType.text,
  validator: (value) => value?.isEmpty == true ? 'Required' : null,
)

// Password field with visibility toggle
CustomPasswordField(
  hintText: 'Enter password',
  label: 'Password',
  validator: (value) => value?.length < 6 ? 'Too short' : null,
)

// Dropdown selection
CustomDropdownFormField<String>(
  value: selectedValue,
  items: ['Option 1', 'Option 2', 'Option 3'],
  hintText: 'Select an option',
  onChanged: (value) => setState(() => selectedValue = value),
)

📖 Components #

CustomTextFormField #

A cross-platform text input field with consistent styling.

CustomTextFormField(
  hintText: 'Enter your email',
  label: 'Email Address',
  textInputType: TextInputType.emailAddress,
  validator: (value) {
    if (value?.isEmpty == true) return 'Email is required';
    if (!value!.contains('@')) return 'Invalid email';
    return null;
  },
  onChanged: (value) => print('Email: $value'),
  // Styling options
  borderRadius: 12.0,
  borderColor: Colors.grey,
  fillColor: Colors.white,
  textStyle: TextStyle(fontSize: 16),
)

CustomPasswordField #

A password field with built-in visibility toggle.

CustomPasswordField(
  hintText: 'Enter password',
  label: 'Password',
  validator: (value) {
    if (value?.isEmpty == true) return 'Password is required';
    if (value!.length < 8) return 'Password too short';
    return null;
  },
  // Custom icons
  showPasswordIcon: Icons.visibility,
  hidePasswordIcon: Icons.visibility_off,
  iconColor: Colors.grey,
)

CustomDropdownFormField #

A cross-platform dropdown with search functionality.

CustomDropdownFormField<String>(
  value: selectedCountry,
  items: countries,
  hintText: 'Select country',
  label: 'Country',
  onChanged: (value) => setState(() => selectedCountry = value),
  // Search functionality
  enableSearch: true,
  searchHint: 'Search countries...',
  // Custom item builder
  itemBuilder: (context, item, isSelected) => ListTile(
    title: Text(item),
    trailing: isSelected ? Icon(Icons.check) : null,
  ),
)

CustomButton #

A cross-platform button with loading states and icons.

CustomButton(
  text: 'Submit',
  onPressed: () => handleSubmit(),
  // Styling
  backgroundColor: Colors.blue,
  borderRadius: 12.0,
  padding: EdgeInsets.symmetric(vertical: 16),
  // Icons
  prefixIcon: Icon(Icons.send),
  // Loading state
  isLoading: isSubmitting,
  loadingIndicatorColor: Colors.white,
)

CustomCheckBox #

A customizable checkbox with animations.

CustomCheckBox(
  isChecked: isAgreed,
  onChecked: (value) => setState(() => isAgreed = value),
  size: 24,
  borderRadius: 6,
  checkColor: Colors.white,
  fillColor: Colors.blue,
  animationDuration: Duration(milliseconds: 200),
)

CustomRadioCheckBox #

A radio-style checkbox with label.

CustomRadioCheckBox(
  value: isSelected,
  onChanged: (value) => setState(() => isSelected = value),
  label: 'I agree to terms and conditions',
  size: 20,
  activeColor: Colors.blue,
  spacing: 12,
  labelStyle: TextStyle(fontSize: 16),
)

🎛️ Configuration Options #

Common Styling Properties #

Text Styling #

🌍 Localization #

All text properties support localization:

CustomTextFormField(
  hintText: S.of(context).emailHint,
  label: S.of(context).emailLabel,
  validator: (value) => value?.isEmpty == true 
      ? S.of(context).emailRequired 
      : null,
)

📱 Platform Behavior #

iOS/macOS #

• Uses CupertinoTextField for native iOS styling
• Uses CupertinoPicker for dropdowns
• Uses CupertinoButton for buttons

Android/Other Platforms #

• Uses TextFormField with Material Design styling
• Uses showModalBottomSheet for dropdowns
• Uses Material and InkWell for buttons

🧪 Testing #

The package includes comprehensive tests. Run them with:

flutter test

🎨 Customization Examples #

Custom Theme #

// Create a custom theme
class MyFormTheme {
  static const primaryColor = Color(0xFF6366F1);
  static const borderRadius = 16.0;
  static const spacing = 20.0;
  
  static CustomTextFormField styledTextField({
    required String hintText,
    required String? Function(String?) validator,
  }) {
    return CustomTextFormField(
      hintText: hintText,
      validator: validator,
      borderRadius: borderRadius,
      borderColor: primaryColor.withOpacity(0.3),
      focusedBorderColor: primaryColor,
      fillColor: Colors.grey.shade50,
    );
  }
}

Form Builder Pattern #

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: [
          CustomTextFormField(
            controller: _emailController,
            hintText: 'Email',
            textInputType: TextInputType.emailAddress,
            validator: (value) => value?.isEmpty == true ? 'Required' : null,
          ),
          SizedBox(height: 16),
          CustomPasswordField(
            controller: _passwordController,
            hintText: 'Password',
            validator: (value) => value?.length < 6 ? 'Too short' : null,
          ),
          SizedBox(height: 24),
          CustomButton(
            text: 'Login',
            onPressed: _handleLogin,
            isLoading: _isLoading,
          ),
        ],
      ),
    );
  }
}

🤝 Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments #

• Flutter team for the amazing framework
• Contributors and users who provide feedback

📞 Support #

If you encounter any problems or have suggestions, please file an issue at the GitHub repository.

Made with ❤️ for the Flutter community