我想使一个特定的按钮不活动,并在所有的必填字段填写正确之前使用不同的颜色,我还希望在文本字段下有一条消息,告诉用户正确填写字段,如果他们没有。这是我目前所拥有的:[![这是我目前拥有的][1]][1]
但我想要这样的东西:
下面是我的代码:
TextField(
// controller:
obscureText: false,
maxLines: null,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: "Email Address",
labelStyle: TextStyle(fontSize: 20, color: Colors.grey),
floatingLabelStyle:
TextStyle(color: Colors.black, fontSize: 20),
hintText: 'Email Address',
hintStyle: TextStyle(fontSize: 0.5),
isDense: true,
enabledBorder: OutlineInputBorder(
borderSide:
const BorderSide(width: 2.0, color: Colors.grey),
borderRadius: BorderRadius.circular(7),
),
focusedBorder: OutlineInputBorder(
borderSide:
const BorderSide(color: Colors.green, width: 2.0),
borderRadius: BorderRadius.circular(7)),
),
onChanged: (value) {
setState(() {
_email = value.trim();
});
},
),
这是我的按钮代码:
GestureDetector(
onTap: (() {}),
child: Container(
child: Center(
child: Padding(
padding: const EdgeInsets.all(20),
child: Text(
"Continue",
style: TextStyle(fontSize: 19, color: Colors.white),
),
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.green),
),
),
4条答案
按热度按时间ldioqlga1#
创建状态
bool
以控制onPressed
活动模式,并侦听TextFiled上的更改并更新bool。w6mmgewl2#
添加一个
bool
类型变量......并检查textfield
值是否有效,如示例bool
值是否为真,button
colors
是否可更改和单击kulphzqa3#
检查此工作是否正常
oymdgrw74#
使用Form验证字段。当其中一个字段更改时,将调用
onChanged
,因此请在此处设置状态。只要表单无效,就通过将onPressed
设置为null来禁用按钮。对TextFormField使用AutovalidateMode.always
可启用验证,而无需用户交互。