在Flutter中聚焦时,如何在TextFormField中添加阴影?我希望该字段具有以下外观:
到目前为止,我设法在对焦时应用了边框,但是看不到任何应用阴影的选项:
TextFormField(
decoration: InputDecoration(
fillColor: Colors.white,
hoverColor: Colors.white,
filled: true,
enabledBorder: OutlineInputBorder(borderSide: BorderSide.none),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 1))),
);
关于如何获得这种效果的任何想法?
重要提示:TextField
用Form
小部件包装并分配_formKey
它有助于防止在以后关闭键盘setState()
完整的例子:
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: Home(),
),
);
}
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
static GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
FocusNode focusNode;
@override
void initState() {
super.initState();
focusNode = FocusNode();
focusNode.addListener(() => setState(() {}));
}
@override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: Duration(seconds: 5),
margin: const EdgeInsets.all(16),
decoration: focusNode.hasFocus ? BoxDecoration(boxShadow: [BoxShadow(blurRadius: 6)]) : null,
child: Form(
key: _formKey,
child: TextFormField(
focusNode: focusNode,
decoration: InputDecoration(
fillColor: Colors.white,
hoverColor: Colors.white,
filled: true,
enabledBorder: OutlineInputBorder(borderSide: BorderSide.none),
focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey, width: 1))),
),
),
);
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句