Use prebuild flutter customTextField and save your quality time
Features
Currently there are Five types of textFields Available
- Simple TextField With Border
- TextField With Prefix and suffix Icon
- TextField With Country Code
- TextField With Country Name
- TextField With Max Line
Getting started
just install the pakage and use custome text Fields
Code Snippet watch full example below
- BorderTextFieldWithIcon
BorderTextFieldWithIcon(
hintText: "email",
prefixIcon: Icon(
Icons.people,
// color: Colors.white,
),
suffixIcon: Icon(
Icons.email,
// color: Colors.white,
),
),
- SimpleTextFieldWithBorder
SimpleTextFieldWithBorder(
label: "label",
bordercolor: Colors.red,
),
- TextFieldWithCountryCodesDropDown
TextFieldWithCountryMobileNo(
selectedCountryCode: selectedCountryCode,
onChangedDropDown: (String? value) {
print(value);
selectedCountryCode = value!;
setState(() {});
},
onChanged: (String? text) {
print(text);
},
)
- TextFieldWithCountryName
TextFieldWithCountryName(
selectedCountryCode: selectedCountryName,
onChangedDropDown: (String? value) {
print(value);
selectedCountryName = value!;
setState(() {});
},
onChanged: (String? text) {
print(text);
},
),
- TextFieldWithMaxLines
const MultiLineTextField(
maxLines: 10,
bordercolor: Colors.red,
)
Usage
class _MyHomePageState extends State<MyHomePage> {
String selectedCountryCode = "+91";
String selectedCountryName = "India";
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Padding(
padding: const EdgeInsets.all(28.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const BorderTextFieldWithIcon(
hintText: "email",
prefixIcon: Icon(
Icons.people,
// color: Colors.white,
),
suffixIcon: Icon(
Icons.email,
// color: Colors.white,
),
),
const SizedBox(
height: 20,
),
const SimpleTextFieldWithBorder(
label: "label",
bordercolor: Colors.red,
),
const SizedBox(
height: 20,
),
TextFieldWithCountryMobileNo(
selectedCountryCode: selectedCountryCode,
onChangedDropDown: (String? value) {
print(value);
selectedCountryCode = value!;
setState(() {});
},
onChanged: (String? text) {
print(text);
},
),
const SizedBox(
height: 20,
),
TextFieldWithCountryName(
selectedCountryCode: selectedCountryName,
onChangedDropDown: (String? value) {
print(value);
selectedCountryName = value!;
setState(() {});
},
onChanged: (String? text) {
print(text);
},
),
const SizedBox(
height: 20,
),
const MultiLineTextField(
maxLines: 10,
bordercolor: Colors.red,
)
],
),
),
),
);
}
}
Additional information
I used Country Picker pacakage resources in this, Thanks for that country picker. https://pub.dev/packages/country_picker Contribution is always welcome https://github.com/aman246149/flutter-custom-textfields