**# 📦 Custom Text Field With Drop Down
A customizable Flutter widget combining a styled TextFormField with optional dropdown suggestions, gradient background, obscure text toggle, and reusable styles — fully null-safe.
✨ Features
- ✅ Customizable border, hint style, fill color or gradient
- 🔒 Optional obscure text toggle with visibility icon
- 🔽 Optional dropdown suggestion list with live filtering
- 🎨 Reusable hint and suffix/prefix icons
- 📐 Supports maxLines, **# 📦 Custom Text Field With Drop Down
A customizable Flutter widget combining a styled TextFormField with optional dropdown suggestions, gradient background, obscure text toggle, and reusable styles — fully null-safe.
✨ Features
- ✅ Customizable border, hint style, fill color or gradient
- 🔒 Optional obscure text toggle with visibility icon
- 🔽 Optional dropdown suggestion list with live filtering
- 🎨 Reusable hint and suffix/prefix icons
- 📐 Supports maxLines, readOnly, input types, and more
📸 Screenshots
🚀 Getting Started
Add this package to your pubspec.yaml:
🛠 Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
hintText |
String |
— | Hint text shown inside the input field |
showObscure |
bool |
— | Enables password-style obscure toggle |
readOnly |
bool? |
false |
Makes the field read-only |
prefixIcon |
IconData? |
null |
Optional prefix icon |
suffixIcon |
Icon? |
null |
Custom suffix icon when showObscure is false |
showClearButton |
bool |
false |
Show clear (X) icon when input has text |
keyboardType |
TextInputType? |
text |
Type of input (text, number, email, etc.) |
controller |
TextEditingController? |
null |
Controller for accessing text field value |
borderColor |
Color? |
Colors.green |
Border color of the input field |
maxLines |
int? |
1 |
Max number of lines for the field |
borderRadius |
double? |
8.0 |
Radius for border corners |
hintStyle |
TextStyle? |
Default style | Optional text style for hint text |
fillColor |
Color? |
null |
Background color |
fillGradient |
Gradient? |
null |
Optional gradient background |
iconColor |
Color? |
Colors.grey |
Color for prefix/suffix icons |
dropdownShow |
bool |
false |
Show dropdown suggestions |
dropdownItems |
List<String> |
[] |
Static list of dropdown options |
🚀 Usage
import 'package:custom_text_field_with_drop_down/custom_text_field_with_drop_down.dart';
/// text filed with fill color and without border color
CustomTextFieldWithDropDown(
controller: _controller,
fillColor: Color(0xFFE4E4E4),
borderColor: Colors.transparent,
hintText: "Enter confirm password",
prefixIcon: Icons.person_3_outlined,
showObscure: false,
),
SizedBox(height: 30),
/// text filed with fill color and without border color
CustomTextFieldWithDropDown(
iconColor: Colors.red,
suffixIcon: Icon(Icons.insert_emoticon_sharp),
controller: _controller,
fillColor: Colors.cyan,
borderColor: Colors.transparent,
hintText: "Enter confirm password",
prefixIcon: Icons.person_3_outlined,
showObscure: false,
),
SizedBox(height: 30),
/// text filed with fill color
CustomTextFieldWithDropDown(
controller: _controller,
fillColor: Color(0xFFE4E4E4),
borderColor: Colors.green,
hintText: "Enter confirm password",
showObscure: true,
),
SizedBox(height: 30),
/// read only text filed and max line also the border radius
CustomTextFieldWithDropDown(
borderRadius: 1.0,
maxLines: 4,
readOnly: true,
controller: _controller,
fillColor: Color(0xFFE4E4E4),
borderColor: Colors.green,
hintText: "Enter confirm password",
showObscure: false,
),
SizedBox(height: 30),
/// gradiant with clear button
CustomTextFieldWithDropDown(
showClearButton: true,
clearBtnColor: Colors.red,
fillGradient: LinearGradient(
colors: [Colors.blue, Colors.green],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
controller: _controller,
borderColor: Colors.green,
hintText: "Enter confirm password",
showObscure: false,
),
SizedBox(height: 30),
/// drop down suggestion
CustomTextFieldWithDropDown(
controller: _controller,
fillColor: Color(0xFFE4E4E4),
borderColor: Colors.transparent,
hintText: "Enter your search",
showObscure: false,
dropdownShow: true,
dropdownItems: [
"Apple",
"Banana",
"Cherry",
"Date",
"Grapes",
], // Static items
),