以下是我尝试添加带有装饰的表单 TextFormField 的代码，如模拟所示:
mock :
代码:
class MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
TextFormField(
decoration: InputDecoration(
fillColor: Colors.grey,
focusColor: Colors.grey
),
validator: (value) {
if (value.isEmpty) {
return 'Your email';
}
return null;
},
),
TextFormField(
decoration: InputDecoration(
fillColor: Colors.grey,
focusColor: Colors.grey
),
validator: (value) {
if (value.isEmpty) {
return 'Your password';
}
return null;
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: RaisedButton(
onPressed: () {
// Validate returns true if the form is valid, or false
// otherwise.
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text('Processing Data')));
}
},
child: Text('Submit'),
),
),
],
),
);
}
}
编辑:
如何更改此标签的颜色？
最佳答案
您可以使用 borderRadius在 OutlineInputBorder使其圆润。
@override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Scaffold(
appBar: AppBar(
title: Text('Testing'),
),
body: Form(
child: Column(
key: _formKey,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: Container(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: new BorderRadius.circular(10.0),
),
child: Padding(
padding: EdgeInsets.only(left: 15, right: 15, top: 5),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
labelText: 'Email',
))))),
Padding(
padding: EdgeInsets.all(10),
child: Stack(
alignment: const Alignment(0, 0),
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: new BorderRadius.circular(10.0),
),
child: Padding(
padding:
EdgeInsets.only(left: 15, right: 15, top: 5),
child: TextFormField(
obscureText: true,
decoration: InputDecoration(
border: InputBorder.none,
labelText: 'Your password',
)))),
Positioned(
right: 15,
child: RaisedButton(
onPressed: () {
// _controller.clear();
},
child: Text('SHOW')))
],
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Container(
height: 50,
width: double.infinity,
child: RaisedButton(
color: Colors.green,
onPressed: () {
// Validate returns true if the form is valid, or false
// otherwise.
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Processing Data')));
}
},
child: Text(
'Submit',
style: TextStyle(color: Colors.white),
),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.green)),
),
)),
],
),
));
}
输出
编辑
单击时可以更改边框颜色
@override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Scaffold(
appBar: AppBar(
title: Text('Testing'),
),
body: Form(
child: Column(
key: _formKey,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: TextField(
autofocus: false,
style: TextStyle(fontSize: 15.0, color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Username',
filled: true,
fillColor: Colors.grey,
contentPadding: const EdgeInsets.only(
left: 14.0, bottom: 6.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(10.0),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(10.0),
),
),
),
),
Padding(
padding: EdgeInsets.all(10),
child: Stack(
alignment: const Alignment(0, 0),
children: <Widget>[
TextField(
obscureText: true,
autofocus: false,
style: TextStyle(fontSize: 15.0, color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'password',
filled: true,
fillColor: Colors.grey,
contentPadding: const EdgeInsets.only(
left: 14.0, bottom: 6.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(10.0),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(10.0),
),
),
),
Positioned(
right: 15,
child: Container(
width: 65,
height: 30,
child: RaisedButton(
onPressed: () {
// _controller.clear();
},
child: Text(
'SHOW',
style: TextStyle(fontSize: 8),
))))
],
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Container(
height: 50,
width: double.infinity,
child: RaisedButton(
color: Colors.green,
onPressed: () {
// Validate returns true if the form is valid, or false
// otherwise.
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Processing Data')));
}
},
child: Text(
'Submit',
style: TextStyle(color: Colors.white),
),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.green)),
),
)),
],
),
));
}
输出
关于flutter - 如何在 flutter 中向 TextFormField 添加以下装饰？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59404238/