zeba_academy_input_fields

A beautiful and customizable Flutter package for modern input fields with built-in validation, floating labels, password visibility toggle, and input masking support.

---

✨ Features

✅ Pre-styled input fields ✅ Floating labels ✅ Validation UI ✅ Password visibility toggle ✅ Input masks support ✅ Custom border styling ✅ Prefix & suffix icons ✅ Clean and reusable API ✅ Material Design support ✅ Easy form integration

---

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_input_fields: ^1.0.0

Then run:

flutter pub get

---

🚀 Import

import 'package:zeba_academy_input_fields/zeba_academy_input_fields.dart';

---

🧩 Basic Usage

ZebaInputField(
  label: 'Email',
  hintText: 'Enter your email',
)

---

📧 Email Field Example

ZebaInputField(
  label: 'Email',
  hintText: 'Enter email',
  keyboardType: TextInputType.emailAddress,
  prefixIcon: Icons.email,
  validator: ZebaValidators.email,
)

---

🔒 Password Field Example

ZebaInputField(
  label: 'Password',
  isPassword: true,
  prefixIcon: Icons.lock,
  validator: ZebaValidators.password,
)

---

📱 Phone Number With Input Mask

ZebaInputField(
  label: 'Phone Number',
  keyboardType: TextInputType.phone,
  mask: '(###) ###-####',
  prefixIcon: Icons.phone,
)

---

🎨 Custom Styling

ZebaInputField(
  label: 'Username',
  style: InputFieldStyle(
    borderColor: Colors.grey,
    focusedBorderColor: Colors.blue,
    errorBorderColor: Colors.red,
    fillColor: Colors.grey.shade100,
    borderRadius: 16,
  ),
)

---

✅ Validators

Built-in validators:

ZebaValidators.requiredField
ZebaValidators.email
ZebaValidators.password

Example:

validator: ZebaValidators.email

---

🧪 Complete Example

import 'package:flutter/material.dart';
import 'package:zeba_academy_input_fields/zeba_academy_input_fields.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DemoPage(),
    );
  }
}

class DemoPage extends StatelessWidget {
  DemoPage({super.key});

  final _formKey = GlobalKey<FormState>();

  final emailController = TextEditingController();
  final passwordController = TextEditingController();
  final phoneController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Zeba Input Fields'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              ZebaInputField(
                controller: emailController,
                label: 'Email',
                hintText: 'Enter email',
                keyboardType: TextInputType.emailAddress,
                prefixIcon: Icons.email,
                validator: ZebaValidators.email,
              ),

              const SizedBox(height: 20),

              ZebaInputField(
                controller: passwordController,
                label: 'Password',
                isPassword: true,
                prefixIcon: Icons.lock,
                validator: ZebaValidators.password,
              ),

              const SizedBox(height: 20),

              ZebaInputField(
                controller: phoneController,
                label: 'Phone Number',
                keyboardType: TextInputType.phone,
                prefixIcon: Icons.phone,
                mask: '(###) ###-####',
                validator: ZebaValidators.requiredField,
              ),

              const SizedBox(height: 30),

              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(
                        content: Text('Form Valid'),
                      ),
                    );
                  }
                },
                child: const Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

📁 Package Structure

lib/
│
├── zeba_academy_input_fields.dart
│
├── src/
│   ├── zeba_input_field.dart
│   ├── input_field_style.dart
│   ├── validators.dart
│   └── input_theme.dart

---

🛠 Roadmap

• OTP input field
• Animated validation
• Search field widget
• Currency formatter
• PIN input
• Material 3 enhancements
• Dark mode presets

---

🤝 Contributing

Contributions are welcome!

Feel free to open issues and submit pull requests to improve the package.

---

📄 License

This project is licensed under the MIT License.

---

👨‍💻 About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects. You can learn more about me and my work at sufyanism.com or connect with me on LinkedIn

---

🚀 Your all-in-one learning hub!

Explore courses and resources in coding, tech, and development at Zeba Academy and Code Zeba Academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience.

Level up your tech game today! 💻✨

🔗 Links

➡ Main Website: https://zeba.academy ➡ Courses & Resources: https://code.zeba.academy ➡ YouTube: https://www.youtube.com/@zeba.academy ➡ Instagram: https://www.instagram.com/zeba.academy/

---

❤️ Support

If you like this package, please give it a ⭐ on GitHub and share it with the Flutter community.

---

🙌 Thank You

Thank you for visiting and supporting open-source development!