如何修复 flutter web TextFormField 不接受或响应输入?
How to fix flutter web TextFormField not accepting nor responding to input?
我创建这个代码片段是为了在 flutter web 应用程序中创建一个登录 web 表单,我在其中使用了 TextFormField,它显示得很好但是当我尝试在此字段中输入任何字符时,它没有响应并且没有输入被采纳,请问如何解决?
class LoginForm extends StatefulWidget {
@override
LoginFormState createState() {
return LoginFormState();
}
}
class LoginFormState extends State<LoginForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
// TODO: implement build
return Form(
key: _formKey,
child: Column(children: <Widget>[
Row(children: <Widget>[
// Email input field
Container(
width: 120.0,
child: Text(
"Email: *",
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
fontWeight: FontWeight.w500,
fontFamily: 'Merriweather',
),
),
),
SizedBox(
width: 40.0,
),
Container(
width: MediaQuery.of(context).size.width / 4.0,
child: TextFormField(
keyboardType: TextInputType.emailAddress,
cursorColor: Colors.black,
style: TextStyle(
fontSize: 14.0,
),
decoration: InputDecoration(
hintText: 'e@x.y',
contentPadding: EdgeInsets.all(10.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black87,
),
borderRadius: BorderRadius.circular(10.0),
),
),
validator: (value) {
if (value.isEmpty) {
return "Please enter your email!";
}
return "yayyy";
},
),
),
])
]));
}
}
预期:用户可以在 textFormfield 中输入内容
错误:用户无法输入任何内容,滚动条一直闪烁
更新:这是孵化表单本身的代码,希望对您有所帮助。
import 'package:flutter_web/material.dart';
/*import 'package:login_page/widgets/agree.dart';
import 'package:login_page/widgets/gender.dart';
**/
import 'package:dart_flutter_web_preview/widgets/login_form.dart';
import 'home.dart';
class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.white, // ignore: undefined_operator
body: Padding(
padding: EdgeInsets.only(
top: 60.0, bottom: 60.0, left: 120.0, right: 120.0),
child: Card(
// ignore: argument_type_not_assignable
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
elevation: 5.0,
child: Container(
child: Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 3.3,
height: MediaQuery.of(context).size.height,
color: Color(0xFFCFE8E4),
child: Padding(
padding:
EdgeInsets.only(top: 85.0, right: 50.0, left: 50.0),
child: Align(
alignment: Alignment.centerRight,
child: Column(
children: <Widget>[
SizedBox(height: 60),
Container(
padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
//color: Colors.red,
child: Text(
'Go Ahead and Login',
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontFamily: 'Merriweather',
),
),
),
SizedBox(height: 5),
Container(
padding: EdgeInsets.only(top: 5.0, bottom: 5.0),
//color: Colors.red,
child: Text(
'It should only take a couple of seconds to login to your account',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontFamily: 'Merriweather',
//fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
SizedBox(
height: 30.0,
),
RaisedButton(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return Home();
}));
},
child: Text(
'Home',
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
fontWeight: FontWeight.bold,
fontFamily: 'Merriweather',
),
),
),
],
),
),
),
),
Container(
padding: EdgeInsets.only(
top: 140.0, right: 30.0, left: 30.0, bottom: 5.0),
width: MediaQuery.of(context).size.width / 2.3,
height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
Text(
"Login",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontSize: 35.0,
fontFamily: 'Merriweather',
),
//textAlign: TextAlign.end,
),
const SizedBox(
height: 30.0,
),
new LoginForm(),
],
),
),
],
),
),
),
));
} //Widget
} //
我试过你的代码,我遇到的唯一问题是在代码片段上你没有脚手架,但因为我放了脚手架,所以一切都按预期工作。
可能发生的情况是,每次您输入内容时您的小部件都在重建,并且您正在丢失数据。能给个完整的代码吗?
我按照其他有帮助的贡献者所提到的那样尝试升级我的 flutter 版本并且成功了。因此,解决方案在于升级版本,因为添加了许多新更新。
我创建这个代码片段是为了在 flutter web 应用程序中创建一个登录 web 表单,我在其中使用了 TextFormField,它显示得很好但是当我尝试在此字段中输入任何字符时,它没有响应并且没有输入被采纳,请问如何解决?
class LoginForm extends StatefulWidget {
@override
LoginFormState createState() {
return LoginFormState();
}
}
class LoginFormState extends State<LoginForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
// TODO: implement build
return Form(
key: _formKey,
child: Column(children: <Widget>[
Row(children: <Widget>[
// Email input field
Container(
width: 120.0,
child: Text(
"Email: *",
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
fontWeight: FontWeight.w500,
fontFamily: 'Merriweather',
),
),
),
SizedBox(
width: 40.0,
),
Container(
width: MediaQuery.of(context).size.width / 4.0,
child: TextFormField(
keyboardType: TextInputType.emailAddress,
cursorColor: Colors.black,
style: TextStyle(
fontSize: 14.0,
),
decoration: InputDecoration(
hintText: 'e@x.y',
contentPadding: EdgeInsets.all(10.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black87,
),
borderRadius: BorderRadius.circular(10.0),
),
),
validator: (value) {
if (value.isEmpty) {
return "Please enter your email!";
}
return "yayyy";
},
),
),
])
]));
}
}
预期:用户可以在 textFormfield 中输入内容 错误:用户无法输入任何内容,滚动条一直闪烁
更新:这是孵化表单本身的代码,希望对您有所帮助。
import 'package:flutter_web/material.dart';
/*import 'package:login_page/widgets/agree.dart';
import 'package:login_page/widgets/gender.dart';
**/
import 'package:dart_flutter_web_preview/widgets/login_form.dart';
import 'home.dart';
class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.white, // ignore: undefined_operator
body: Padding(
padding: EdgeInsets.only(
top: 60.0, bottom: 60.0, left: 120.0, right: 120.0),
child: Card(
// ignore: argument_type_not_assignable
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
elevation: 5.0,
child: Container(
child: Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 3.3,
height: MediaQuery.of(context).size.height,
color: Color(0xFFCFE8E4),
child: Padding(
padding:
EdgeInsets.only(top: 85.0, right: 50.0, left: 50.0),
child: Align(
alignment: Alignment.centerRight,
child: Column(
children: <Widget>[
SizedBox(height: 60),
Container(
padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
//color: Colors.red,
child: Text(
'Go Ahead and Login',
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontFamily: 'Merriweather',
),
),
),
SizedBox(height: 5),
Container(
padding: EdgeInsets.only(top: 5.0, bottom: 5.0),
//color: Colors.red,
child: Text(
'It should only take a couple of seconds to login to your account',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontFamily: 'Merriweather',
//fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
SizedBox(
height: 30.0,
),
RaisedButton(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return Home();
}));
},
child: Text(
'Home',
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
fontWeight: FontWeight.bold,
fontFamily: 'Merriweather',
),
),
),
],
),
),
),
),
Container(
padding: EdgeInsets.only(
top: 140.0, right: 30.0, left: 30.0, bottom: 5.0),
width: MediaQuery.of(context).size.width / 2.3,
height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
Text(
"Login",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontSize: 35.0,
fontFamily: 'Merriweather',
),
//textAlign: TextAlign.end,
),
const SizedBox(
height: 30.0,
),
new LoginForm(),
],
),
),
],
),
),
),
));
} //Widget
} //
我试过你的代码,我遇到的唯一问题是在代码片段上你没有脚手架,但因为我放了脚手架,所以一切都按预期工作。
可能发生的情况是,每次您输入内容时您的小部件都在重建,并且您正在丢失数据。能给个完整的代码吗?
我按照其他有帮助的贡献者所提到的那样尝试升级我的 flutter 版本并且成功了。因此,解决方案在于升级版本,因为添加了许多新更新。