我有这个AnimatedContainer,它以圆形开始,然后改变状态就变成一个矩形。最初,它内部只有一个居中图标,但是当容器展开时,图标附近会弹出一个文本。问题在于,当容器展开时,文本要比其容器大,因此会发生像素溢出。我该如何解决?
Widget _animatedButton() {
return GestureDetector(
child: AnimatedContainer(
duration: Duration(milliseconds: 300),
height: MediaQuery.of(context).size.height * 0.08,
width: _searchOpen
? MediaQuery.of(context).size.width * 0.5
: MediaQuery.of(context).size.height * 0.08,
decoration: new BoxDecoration(
gradient: _searchOpen
? LinearGradient(colors: greenGradient)
: RadialGradient(colors: greenGradient),
borderRadius: _searchOpen
? BorderRadius.circular(16)
: BorderRadius.circular(
MediaQuery.of(context).size.height * 0.04),
boxShadow: <BoxShadow>[
new BoxShadow(
color: Colors.black12,
blurRadius: 10.0,
offset: const Offset(0, 10.0),
)
],
),
child: Row(
children: <Widget>[
Expanded(child: Container()),
Center(
child: Icon(
Icons.search,
color: Colors.white,
size: MediaQuery.of(context).size.height * 0.05,
),
),
_searchOpen
? new SizedBox(width: MediaQuery.of(context).size.width * 0.02)
: Container(),
_searchOpen
? new Text(
"Search",
style: TextStyle(
color: Colors.white,
fontFamily: "LazyDog",
fontSize: MediaQuery.of(context).size.width * 0.1),
)
: Container(),
new Expanded(child: Container()),
],
),
),
onTap: () {
setState(() {
_searchOpen ? _searchOpen = false : _searchOpen = true;
});
},
);
}