As shown in image, error message disturb TextField.
I am using container a parent widget to make some UI stuff but this happened.
Without validation message it works fin
I want error message below the TextField not inside, kindly help.
As shown in image, error message disturb TextField.
I am using container a parent widget to make some UI stuff but this happened.
Without validation message it works fine.
I want error message below the TextField not inside, kindly help.
import 'package:flutter/material.dart';
import 'package:email_validator/email_validator.dart';
class RoundedTextField extends StatelessWidget {
final String hintText;
final IconData iconData;
final Color hintcolor, iconcolor;
final bool password;
final TextEditingController tcontroller;
final TextInputType tType;
const RoundedTextField(
{Key key,
#required this.hintText,
#required this.iconData,
#required this.hintcolor,
this.iconcolor,
this.password,
this.tcontroller,
this.tType})
: super(key: key);
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 20),
width: size.width * 0.8,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(29),
color: Color(0xFFa5b2fc),
),
child: TextFormField(
controller: tcontroller,
obscureText: password,
keyboardType: tType,
validator: (String value) {
bool isValid = EmailValidator.validate(value);
if (!password) {
if (!isValid) {
return "Invalid Email Address";
}
}
},
decoration: InputDecoration(
suffixIcon: password
? (Icon(
Icons.visibility,
color: iconcolor,
))
: null,
border: InputBorder.none,
icon: Icon(
iconData,
color: iconcolor,
),
hintText: hintText,
hintStyle: TextStyle(color: hintcolor),
),
),
);
}
}
Use the decoration within the TexformField. Including Text, borders, Shapes, Colors
Related
I am trying to create a RoundedInputField as a StatelessWidget. I am still learning both Dart and Flutter but I am a bit stuck at the moment. So where it all started is that I want to optionally choose a prefixIcon from outside the class. I created a helper function buildInputDecorator in order to handle the creation of InputDecoration based on iconData is set or not. I have a couple of compilation errors that I am not sure how to tackle. I have added the errors as comments.
My code is:
import 'package:flutter/material.dart';
class RoundedInputField extends StatelessWidget {
final IconData? iconData;
const RoundedInputField({super.key, this.iconData});
InputDecoration buildInputDecorator(String hint) {
if (iconData != null) {
return const InputDecoration(
hintText: hint, //Invalid constant value.dart(invalid_constant)
prefixIcon: Icon(iconData), //Arguments of a constant creation must be constant expressions.
);
}
return const InputDecoration(
hintText: hint, //Invalid constant value.dart(invalid_constant)
);
}
#override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
color: Color.fromRGBO(73, 152, 203, 1),
),
padding: const EdgeInsets.fromLTRB(10.0, 0, 0, 10.0),
child: const TextField(
decoration: buildInputDecorator("Email"), //Invalid constant value.dart(invalid_constant)
),
);
}
}
I try your code, why not just like this instead of making a function :
import 'package:flutter/material.dart';
class RoundedInputField extends StatelessWidget {
final IconData? iconData;
final String? hint;
const RoundedInputField({super.key, this.iconData, this.hint});
#override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
color: Color.fromRGBO(73, 152, 203, 1),
),
padding: const EdgeInsets.fromLTRB(10.0, 0, 0, 10.0),
child: TextField(
decoration: InputDecoration(
hintText: hint,
prefixIcon: iconData != null ? Icon(iconData) : null
),
),
);
}
}
I code a textformfield widget and add validator then I called it from another screen but validator doesn't work. how to add validator in widget and call it from another class?
Input Field widget(this is what I called from loginscreen)
import 'package:flutter/material.dart';
import 'constants.dart';
class InputField extends StatelessWidget {
final TextEditingController controller;
final IconData? icon;
final String? text;
final String? errorText;
final TextInputType textInputType;
final TextAlign textAlign;
final Function function;
const InputField({
Key? key,
required this.controller,
this.icon,
this.text,
required this.textInputType,
this.errorText,
required this.textAlign,
required this.function,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
child: TextFormField(
controller: controller,
keyboardType: textInputType,
textInputAction: TextInputAction.next,
validator: (value){
function(value);
},
textAlign: textAlign,
decoration: InputDecoration(
prefixIcon: Icon(icon,color: kPrimaryColor,),
contentPadding: const EdgeInsets.all(5),
hintStyle: TextStyle(
fontFamily: 'InriaSans',
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold
),
hintText: text,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),),
),
),
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 40),
);
}
}
LOGIN SCREEN
I called input field in this login screen.
Widget _buildEmail(){
return InputField(
controller: emailController,
icon: Icons.email,
text: 'User email',
textAlign: TextAlign.left,
textInputType: TextInputType.emailAddress,
function: (){
return Validator.emailValidate(emailController.text);
},
);
}
I have a form with TextFormFields. I can give focus to next field using Tab key as usual. But, it skips DateTimeFormField. How can I make it show the Date picker instead of skipping it when it is its turn?
Did some search but couldn't find anything near it.
Here is my code samples. I simply use TextFormField's and DateTimeFormField inside a Column. But there is no focus option for DateTimeFormField.
class FormDialog extends ConsumerWidget {
const FormDialog({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context, WidgetRef ref) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(
height: 12,
),
CustomTextField(
labelText: firstName,
textInputAction: TextInputAction.next,
),
const SizedBox(
height: 12,
),
CustomTextField(
labelText: lastName,
textInputAction: TextInputAction.next,
),
const SizedBox(
height: 12,
),
CustomDateField(
labelText: dateOfBirth,
),
const SizedBox(
height: 12,
),
CustomTextField.email(
labelText: parentEmail,
),
],
);
}
}
class CustomDateField extends StatelessWidget {
const CustomDateField({
Key? key,
this.labelText,
this.hintText,
}) : super(key: key);
final String? labelText;
final String? hintText;
#override
Widget build(BuildContext context) {
return DateTimeFormField(
mode: DateTimeFieldPickerMode.date,
dateFormat: DateFormat.yMd(),
decoration: InputDecoration(
labelText: labelText,
hintText: hintText,
border: const OutlineInputBorder(),
helperText: ' ',
),
);
}
}
class CustomTextField extends StatelessWidget {
const CustomTextField({
Key? key,
this.labelText,
this.icon,
this.textInputAction,
}) : super(key: key);
final String? labelText;
final TextFieldIcon? icon;
final TextInputAction? textInputAction;
#override
Widget build(BuildContext context) {
return TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction,
decoration: InputDecoration(
hintText: labelText,
border: const OutlineInputBorder(),
prefixIcon: icon,
helperText: ' ',
),
textInputAction: textInputAction,
);
}
factory CustomTextField.email({
String? errorMessage,
String? labelText,
}) =>
CustomTextField(
labelText: labelText ?? email,
icon: const TextFieldIcon.email(),
textInputAction: TextInputAction.next,
);
}
According to the package's Github repository, it is built upon FormField, creating and initializing a FocusNode and passing the focus node to the widget might resolve the issue. If not you might need to implement your own form field.
I have been trying to align the country code selector with the phone number text field. Please help, the following is the problem and the code. I need everything horizontally centered.
class RoundedPhoneField extends StatelessWidget {
final String hintText;
final IconData icon;
final ValueChanged<String> onChanged;
const RoundedPhoneField({
Key? key,
required this.hintText,
this.icon = Icons.person,
required this.onChanged,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return PhoneFieldContainer(
child: IntlPhoneField(
decoration: InputDecoration(
labelText: hintText,
isCollapsed: true,
floatingLabelBehavior: FloatingLabelBehavior.never,
border: InputBorder.none,
),
initialCountryCode: 'ZM',
onChanged: (phone) {
print(phone.completeNumber);
},
),
);
}
}
class PhoneFieldContainer extends StatelessWidget {
final Widget child;
const PhoneFieldContainer({
Key? key,
required this.child,
}) : super(key: key);
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
padding: EdgeInsets.fromLTRB(20, 10, 20, 5,),
width: size.width * 0.8,
decoration: BoxDecoration(
color: kPrimaryLightColor,
borderRadius: BorderRadius.circular(29),
),
child: child,
);
}
}
I have faced the same issue.
This problem is with the plugin itself:
I have made the required changes here and it looks like this now:
I have created a custom controller for TextFormField, but I use it in my widgets it clears the input upon releasing focus from the input. the same setup works fine with the local widget set up with the same but I want to have a common widget to use throughout the application for better code maintainability. How can have the input intact entered into the input field??
Custom Input Widget-
import 'package:HSSE/screens/constant.dart';
import 'package:flutter/material.dart';
class AppInput extends StatelessWidget {
const AppInput(
{Key key,
this.correct = false,
this.hintText,
this.inputLabel,
this.labelFont = 18.0,
this.labelFontWeight,
this.validators,
this.keyboard,
this.length,
this.icon,
this.trailingIcon,
this.readOnly = false,
this.inputController,
this.onTap = null,
this.onInputValueChange,
this.labelText})
: super(key: key);
final bool correct;
final String hintText;
final String labelText;
final String inputLabel;
final double labelFont;
final FontWeight labelFontWeight;
final Function validators;
final Function onInputValueChange;
final TextInputType keyboard;
final int length;
final Icon icon;
final Icon trailingIcon;
final bool readOnly;
final Function onTap;
final TextEditingController inputController;
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
border: Border.all(color: Color(0Xffcacaca), width: 0.75),
borderRadius: BorderRadius.circular(10),
),
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
labelText,
style: TextStyle(fontSize: labelFont),
),
TextFormField(
readOnly: readOnly,
keyboardType: keyboard,
maxLength: length,
controller: inputController,
cursorColor: apmt_color,
decoration: InputDecoration(
prefixIcon: icon,
suffixIcon: trailingIcon,
errorStyle: TextStyle(
fontSize: 16,
),
border: InputBorder.none,
hintText: hintText,
labelStyle: TextStyle(
color: Colors.black,
),
fillColor: Colors.red,
),
style: TextStyle(color: Colors.black),
onChanged: (value) {
onInputValueChange(value);
},
validator: (value) {
return validators(value);
},
)
],
),
);
}
}
When I use it into my other widget like below -
final TextEditingController emailCtrl = TextEditingController();
AppInput(
inputController: emailCtrl,
keyboard: TextInputType.emailAddress,
hintText: Localizer.of(context).translate('inspectorNameHint'),
labelText: Localizer.of(context).translate('inspectorName'),
validators: (String name) {
if (name.isEmpty)
return Localizer.of(context)
.translate('inspectorNameError');
},
)
the input gets clears when the focus gets removed from the input field it works fine with the same setup on the local widget but I want to make a common widget to optimize the code.