🌟 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: ^0.1.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 #

🧱 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,
);

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: Icons.email_outlined,
  suffixIcon: Icons.check_circle_outline,
  theme: customTheme,
);

📞 With Country Code Picker #

CustomTextFieldPro(
  titleText: "Phone",
  hintText: "Enter your phone number",
  showCountryCodePicker: true,
  initialCountryCode: '+1',
  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),
);

Then use anywhere:

import 'theme/custom_text_field_theme.dart';

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

🧩 Parameters Overview #

🚨 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 LICENSE for details.

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