🌟 Custom Text Field Pro

A Flutter package that provides highly customizable text fields with built-in support for password visibility, prefix/suffix icons, and even a country code picker — all with global theming control.

---

📦 Installation

🔗 Depend on it

Run this command:

With Flutter:

flutter pub add custom_text_field_pro

Or add it manually to your pubspec.yaml:

dependencies:
  custom_text_field_pro: ^1.0.0

Then run:

flutter pub get

---

🎨 Why Custom Text Field Pro?

This widget eliminates repetitive TextFormField styling code and gives you a beautiful, flexible input component with features like:

✅ Password toggle visibility ✅ Custom icons and colors ✅ Built-in country code picker ✅ Global theming ✅ Focused and unfocused border control ✅ Reusable across your entire app

---

⚙️ Setup Example

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

void main() => runApp(const ExampleApp());

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

  @override
  Widget build(BuildContext context) {
    final customTheme = const CustomTextFieldTheme(
      borderColor: Colors.grey,
      focusedBorderColor: Colors.blue,
      fillColor: Color(0xFFF7F9FB),
      iconColor: Colors.deepPurple,
      titleColor: Color(0xFF202532),
    );

    return MaterialApp(
      title: 'Custom Text Field Pro Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('CustomTextFieldPro Example')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              CustomTextFieldPro(
                titleText: "Username",
                hintText: "Enter your username",
                theme: customTheme,
              ),
              const SizedBox(height: 16),
              CustomTextFieldPro(
                titleText: "Password",
                hintText: "Enter your password",
                isPassword: true,
                theme: customTheme.copyWith(
                  focusedBorderColor: Colors.deepPurple,
                ),
              ),
              const SizedBox(height: 16),
              CustomTextFieldPro(
                titleText: "Phone Number",
                hintText: "Enter your phone number",
                showCountryCodePicker: true,
                initialCountryCode: '+880',
                inputType: TextInputType.phone,
                theme: customTheme,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

🎯 Key Features

Feature	Description
🔐 Password Mode	Toggle visibility for secure inputs
📱 Country Picker	Optional dropdown for phone fields
🎨 Custom Theme	Control all colors globally
✨ Icons	Add prefix & suffix icons easily
🧩 Reusable	Consistent design across app

---

🧱 Theme Customization

Create your global theme once:

const customTheme = CustomTextFieldTheme(
  borderColor: Colors.grey,
  focusedBorderColor: Colors.blue,
  fillColor: Colors.white,
  iconColor: Colors.deepPurple,
  titleColor: Colors.black,
  titleStyle: TextStyle(fontWeight: FontWeight.bold),
  bottomSheetHeight: 500,
  pickerRadius: 16,
);

Then reuse or override anywhere:

theme: customTheme.copyWith(
  focusedBorderColor: Colors.green,
  iconColor: Colors.green,
),

---

💡 Suffix & Prefix Examples

CustomTextFieldPro(
  titleText: "Email",
  hintText: "example@gmail.com",
  prefixIcon: const Icon(Icons.email_outlined),
  suffixIcon: const Icon(Icons.check_circle_outline),
  theme: customTheme,
);

📞 With Country Code Picker

CustomTextFieldPro(
  titleText: "Phone",
  hintText: "Enter your phone number",
  showCountryCodePicker: true,
  initialCountryCode: '+1',
  onCountryCodeChanged: (code) {
    print("Selected code: $code");
  },
  theme: customTheme,
);

---

🧠 Tip: Make it Global

You can create your theme in a separate Dart file, for example:

// theme/custom_text_field_theme.dart
import 'package:custom_text_field_pro/custom_text_field_pro.dart';
import 'package:flutter/material.dart';

const customTextFieldTheme = CustomTextFieldTheme(
  borderColor: Colors.grey,
  focusedBorderColor: Colors.blue,
  fillColor: Color(0xFFF7F9FB),
  iconColor: Colors.deepPurple,
  titleColor: Color(0xFF202532),
  pickerRadius: 12,
);

Then use anywhere:

import 'theme/custom_text_field_theme.dart';

CustomTextFieldPro(
  titleText: "Password",
  hintText: "Enter password",
  isPassword: true,
  theme: customTextFieldTheme,
);

---

🧩 Parameters Overview

Parameter	Type	Description
titleText	String	Optional title text above input
labelText	String	Label for text field
hintText	String	Placeholder text
isPassword	bool	Enables password toggle
prefixIcon	Widget	Icon before text
prefixIconConstraints	BoxConstraints	Constraints for the prefix icon
suffixIcon	Widget	Icon after text
suffixIconConstraints	BoxConstraints	Constraints for the suffix icon
onPrefixTap	VoidCallback	Callback on prefix tap
onSuffixTap	VoidCallback	Callback on suffix tap
showCountryCodePicker	bool	Enables country picker
initialCountryCode	String	Default country code
onCountryCodeChanged	Function(String)	Callback when country code changes
theme	CustomTextFieldTheme	Global color & style config

🚨 Troubleshooting

🔹 "No country picker showing?"

Ensure you have imported the required picker dependency if used.

🔹 "Theme not applying?"

Check that you passed theme: customTheme to the widget.

---

📜 License

MIT - See LICENSEfor details.

Made with ❤️ by Md. Asikuzzaman GitHub: https://github.com/Asik-Zaman