我一直在尝试找出如何为登录页面的材质卡设置动画。第一页将包含一张带有电子邮件和密码字段的卡片。第二页还将显示一张带有名称，国家，城市和地址字段的卡片。我想在两者之间显示某种不错的动画，以显示卡的扩展。这两张卡当前都包裹在英雄中，但是当我从第一页导航到第二页时，出现溢出异常。但是经过一小段时间后，异常清除，并且没有黄色和黑色的条形。
我的问题是，如何在不显示异常（视觉上显示黄色和黑色条）的情况下为卡片设置动画？
我还试图将英雄放置在装有物料卡的容器周围。在包含容器的SingleChildScrollView周围。在包含SingleChildScrollView的中心周围。所有这些工作都不会分散溢出。
class FirstSignUpState extends State<FirstSignUp> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.orangeAccent,
title: Text("Sign Up"),
),
body: Stack(children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bg.jpg"),
fit: BoxFit.cover,
),
),
),
Center(
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: Hero(
tag: "hey",
child: Card(
child: Padding(
padding:
EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(padding: new EdgeInsets.all(10.0)),
TextFormField(
decoration: InputDecoration(
...
class SecondSignUpState extends State<SecondSignUp> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sign Up"),
),
body: Stack(children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage("assets/bg.jpg"), fit: BoxFit.cover,),
),
),
Center(
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 50.0),
child: Hero(
tag: "hey",
child: Card(
child: Padding(
padding: new EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
new Padding(padding: new EdgeInsets.all(10.0)),
TextFormField(
decoration: InputDecoration(
labelText: "Full Name",
...
返回时的动画是正确的，但是从第一页转到第二页会引发错误
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following message was thrown during layout:
flutter: A RenderFlex overflowed by 60 pixels on the bottom.
flutter:
flutter: The overflowing RenderFlex has an orientation of Axis.vertical.
flutter: The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
flutter: black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
flutter: Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
flutter: RenderFlex to fit within the available space instead of being sized to their natural size.
flutter: This is considered an error condition because it indicates that there is content that cannot be
flutter: seen. If the content is legitimately bigger than the available space, consider clipping it with a
flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
flutter: like a ListView.
flutter: The specific RenderFlex in question is:
flutter: RenderFlex#0a7dc OVERFLOWING
flutter: creator: Column ← Padding ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
flutter: _InkFeatures-[GlobalKey#a0d6d ink renderer] ← NotificationListener<LayoutChangedNotification> ←
flutter: CustomPaint ← _ShapeBorderPaint ← PhysicalShape ← _MaterialInterior ← Material ← Padding ← ⋯
flutter: parentData: offset=Offset(20.0, 20.0) (can use size)
flutter: constraints: BoxConstraints(w=326.0, h=303.9)
flutter: size: Size(326.0, 303.9)
flutter: direction: vertical
flutter: mainAxisAlignment: start
flutter: mainAxisSize: max
flutter: crossAxisAlignment: center
flutter: verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
flutter: Another exception was thrown: A RenderFlex overflowed by 128 pixels on the bottom.
flutter: Another exception was thrown: A RenderFlex overflowed by 134 pixels on the bottom.