英文:
reusable textformfield getting all textformfields active
问题
I understand your issue. To make the TextFormField active only when you tap or touch its area, you can set the autovalidateMode to AutovalidateMode.disabled for the TextFormField widgets you don't want to activate automatically. Here's how you can modify your code:
In your login_page.dart, for the "Password" TextFormField, add autovalidateMode as follows:
FormFields.textFormFieldWidget(
controller: _userPassword,
isPassword: true,
hintText: "Password",
hintStyle: CustomTextStyle.reusableTextStyle(
customColor: const Color(0xFF999EA1),
customFontSize: 14,
customFontWeight: FontWeight.w600),
borderColor: const Color(0xFFCDD1E0),
colorFilled: _color,
suffixIcon: Icons.remove_red_eye,
textFieldFocus: _textFieldFocus,
autovalidateMode: AutovalidateMode.disabled, // Add this line
),
This will prevent the "Password" TextFormField from getting activated automatically when you tap the "Email Address" TextFormField. Make sure to apply this change only to the specific TextFormField widgets you want to control in this way.
英文:
I have created a reusable textformfield. Which I can call at any file. However I do have a problem.
If I tap on the TextFormField of "Email Address" the TextFormField of "Password" is getting active too.
Here is the class based function that I am calling in my Stateful Widget.
login_page.dart
// whenever I tap to input a email on this textformfield, it actives the textformfield
// of the userPassword as well.
FormFields.textFormFieldWidget(
controller: _userEmail,
hintText: "Email Address",
hintStyle: CustomTextStyle.reusableTextStyle(
customColor: const Color(0xFF999EA1),
customFontSize: 14,
customFontWeight: FontWeight.w600),
borderColor: const Color(0xFFCDD1E0),
colorFilled: _color,
textFieldFocus: _textFieldFocus,
),
const SizedBox(
height: 12,
),
FormFields.textFormFieldWidget(
controller: _userPassword,
isPassword: true,
hintText: "Password",
hintStyle: CustomTextStyle.reusableTextStyle(
customColor: const Color(0xFF999EA1),
customFontSize: 14,
customFontWeight: FontWeight.w600),
borderColor: const Color(0xFFCDD1E0),
colorFilled: _color,
suffixIcon: Icons.remove_red_eye,
textFieldFocus: _textFieldFocus,
),
This is my reusable textformfield's declaration and implementation.
reusable_widget.dart
import 'package:flutter/material.dart';
class FormFields {
static textFormFieldWidget({
TextEditingController? controller,
String? hintText,
String? helpText,
IconData? prefixIcon,
IconData? suffixIcon,
bool? isPassword,
bool? enabled,
bool? readOnly,
Color? borderColor,
Color? borderSide,
Color? colorFilled,
FocusNode? textFieldFocus,
TextStyle? hintStyle,
}) {
return TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction,
controller: controller,
readOnly: readOnly == null ? false : true,
obscureText: isPassword == null ? false : true,
decoration: InputDecoration(
fillColor: colorFilled,
filled: true,
focusedBorder: OutlineInputBorder(
borderRadius: const BorderRadius.all(
Radius.circular(10.0)),
borderSide: BorderSide(
color: borderSide ?? const Color(0xFF6949FF),
width: 1.15
),
),
enabledBorder: OutlineInputBorder(
borderRadius: const BorderRadius.all(
Radius.circular(10.0)),
borderSide: BorderSide(
color: borderSide ?? const Color(0xFFCDD1E0),
width: 1.15,
),
),
// dont forget this line
hintText: hintText ?? '',
hintStyle: hintStyle ?? TextStyle(),
helperText: helpText ?? '',
prefixIcon: null == prefixIcon ? null : Icon(prefixIcon),
suffix: null == suffixIcon ? null : Icon(suffixIcon),
enabled: null == enabled ? true : false,
),
focusNode: textFieldFocus,
textAlignVertical: TextAlignVertical.center,
);
}
}
I only want to make the textformfield active if I tap it or touch its area, not activate all textformfields.
答案1
得分: 0
你的两个textfields共用了相同的FocusNode，名为_textFieldFocus。
请为它们分别创建两个不同的FocusNode。
英文:
Your two textfields have the same FocusNode, _textFieldFocus.
Give them two different FocusNodes.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论